在用 uni-app 进行前端开发的过程中,客户可能会要求某些文字采用特殊的字体(如:微软雅黑、草书等)。如果字体文件太大,可以将需要的字单独提取出来使用,具体方法步骤如下:

字体下载

找到需要的字体并下载,一般为 ttf、otf 类型的文件。注意:有些字体需要商业授权,如果用在商业项目上使用有侵权风险,请先购买授权。

文字提取

通过 文字提取工具(如果链接已失效,请搜索其他相关功能的页面提取),上传字体文件后,输入要提取的文字并填写自定义字体名称,提取成功后下载到本地。

字体引入

将导出的字体文件中的 *.ttf 文件放入项目 static 文件夹中,并在 App.vue style 中引入:

@font-face {
    font-family: my-font;
    src: url('~@/static/my-font.ttf');
}

字体使用

接下去,就可以像普通内置字体的使用方式一样使用了:

.class {
    font-family: my-font
}

注意事项

  • 如果要导入整个字体,可以省略步骤“字体提取”,但是如果字体文件太大,可能导致加载非常慢。建议非必要时,按需提取。
  • 由于小程序不支持在 css 中使用本地字体文件,需以base64方式方可使用。而字体文件小于 40kb 时,uni-app 会自动将其转化为 base64 格式,但大于等于 40kb,需 人工手动转换(如果链接已失效,请搜索其他相关页面进行转换)。
@font-face {
    font-family: my-font;
    src: url(data:application/font-ttf;charset=utf-8;base64,生成出来的base64字符串) format('truetype');
}