微信小程序> 小程序中引用字体

小程序中引用字体

浏览量:2340 时间: 来源:蘅潇嗜玉

外部引入

我选择外部引入是由于小程序包最多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'

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎