使用外部字体

Posted lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用外部字体相关的知识，希望对你有一定的参考价值。

微信小程序中使用漂亮的字体：

主要有以下几种方法：
1.将需要的字体转换成base64格式的css文件，像阿里字体图标iconfont使用

在字体转换网站https://transfonter.org/中，首先`Add fonts，选中Base64 encode，Formats根据你的字体格式选择，一般是TTF格式，在选择Convert`，转换好之后得到压缩包，解压后就能得到字体的css文件，可是在微信小程序这里并不适用，因为小程序的打包大小必须<2MB，这样得到的css文件都超过了体积限制，这种方法不可行

2.使用wx.loadFontFace加载外部字体
文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.loadFontFace.html

1
2
3
4
5
6
7
8
9
10
11
12
13< 大专栏  使用外部字体br/>14
wx.loadFontFace({
  family: this.data.fontFamily,
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success(res) {
    console.log(res.status)
    self.setData({ loaded: true })
  },
  fail: function(res) {
    console.log(res.status)
  },
  complete: function(res) {
    console.log(res.status)
  }
});

3.在wxss中配置

1
2
3
4
5
/*加载网络字体*/
@font-face {
  font-family: 'Bitstream Vera Serif Bold';
  src: url('https://sungd.github.io/Pacifico.ttf');
}

以上是关于使用外部字体的主要内容，如果未能解决你的问题，请参考以下文章

html中改变字体颜色的代码怎么写

Alfred常见使用

在WPF（core版本）中引用外部字体不可用问题说明

html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma

android：当用户触摸片段外部时，我如何关闭片段？

从外部片段内的 FragmentTabHost 的子片段添加新的选项菜单