步骤一:拿到自定义字体包

​ 首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包。

步骤二:判断字体包是否需要转换

​ 由于小程序不支持在 css 中使用本地字体文件,需以base64方式方可使用。而字体文件小于 40kb 时,uni-app 会自动将其转化为 base64 格式,但大于等于 40kb,需人工手动转换。字体转换网站

步骤三:字体引入

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

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

步骤四:字体使用

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

.class {
    font-family: my-font
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐