在用 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');
}
版权属于:瞭月
本文链接:https://www.lervor.com/archives/115/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。
1 条评论
感谢