小程序中引用字体

外部引入

我选择外部引入是由于小程序包最多2M，字体包一般比较大，所以将字体资源放在阿里云oss上。

特别注意：网络引入需要设置跨域，要不然会引用失败。在阿里云oss基础设置里面可以设置跨域

image.png

• 1、直接在wxss中引用

@font-face {
  font-family: 'fangsong';
  src: url('http://dev-yopin-img.bumeng.cn/.../subset-FangSong_GB2312.ttf') format('truetype');
}

• 2、使用小程序自带方法

wx.loadFontFace({
  family: 'fangsong',
  source: 'url("http://dev-yopin-img.bumeng.cn/.../subset-FangSong_GB2312.ttf")',
  success: console.log()
})

.view {
    font-family: 'fangsong' 
}

内部引入

内部引入可以将小程序分包，将字体包放在本地使用

• 先将字体包转换成需要的格式ttf、eot、svg、woff（字体转换网站）（最好是ttf文件）
  

  

  image.png

• 跟components同级，新建一个style文件夹，里面放第二步转换完下载后的得到的那些后缀文件(eot,svg,ttf,woff,woff2)

• 在style文件夹里，新建.wxss的css文件，打开下载的文件，找到stylesheet.css,将里面的全部内容复制到新建的.wxss中
  

  image.png

• 找到需要引用字体库的wxss文件，用import 方式引入字体库css@import '../../style/fangsong.wxss';
  需要用的标签添加font-family字体名称：font-family: 'fangsong'