美文网首页
小程序中引用字体

小程序中引用字体

作者: 七幺七 | 来源:发表于2019-08-06 18:02 被阅读0次

    外部引入

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

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


    image.png

    且:在iOS不能使用代理地址

    • 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'

    相关文章

      网友评论

          本文标题:小程序中引用字体

          本文链接:https://www.haomeiwen.com/subject/omvwdctx.html