uni-app 中使用外部第三方字体（非字体图标）

本文同步发布在：uni-app 中使用外部第三方字体（非字体图标）

在用 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');
}

本文同步发布在：uni-app 中使用外部第三方字体（非字体图标）