Lazy loaded image
字体引入
字数 502阅读时长≈ 2 分钟
2024-2-20
上次编辑时间
Feb 20, 2024 08:36 AM
创建时间
Feb 20, 2024 07:46 AM
来源
CSDN

小程序字体引入

微信小程序为开发者提供了导入外部字体专用的API：**wx.loadFontFace**
其官方文档如下：wx.loadFontFace(Objectobject) | 微信开放文档
明确注意事项之后我们来看一下具体的导入方式（由于需要导入的字体文件较多，在app.js 中进行批量导入）
以在app.js文件中导入DIN_Alternate_Bold.ttf为例：
我们通过getFonts方法调用了API来导入字体，在onLaunch中调用方法即可在 app.js载入的时候加载外部字体资源；
对wx.loadFontFace中的参数进行简单的说明：
  1. family：自定义的字体名称（这里的名称完全自定义，但需与wxss 中使用的名称相一致）
  1. source：字体资源的地址；格式：url(https://**yourURL**/DIN_Alternate_Bold.ttf)
  1. global：字体是否全局生效，因为我们在 app.js中导入，需要设置全局生效，否则各页面的 wxss文件中无法使用这里导入的字体样式
  1. success/fail：字体资源导入成功 /失败的回调函数，可以打印一些提示信息

uniapp字体引入

  1. 把下载好的文件放入static/font目录中
  1. 在app.vue中引用
  1. 使用:font-family:zitiming

Vue3字体引入

  1. 将已有的xx.ttf按照如下示例放入assets文件夹下
  1. 并且同级目录创建fonts.css写入以下内容
  1. 在main.js引入fonts.css
上一篇
美元加息降息
下一篇
CSS基础样式汇总
目录