【自用】uni-app中使用自定义字体
步骤一:拿到自定义字体包首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包。步骤二:判断字体包是否需要转换由于小程序不支持在 css 中使用本地字体文件,需以base64方式方可使用。而字体文件小于 40kb 时,uni-app 会自动将其转化为 base64 格式,但大于等于 40kb,需人工手动转换。字体转换网站步骤三:字体引入
·
步骤一:拿到自定义字体包
首先要得到自定义字体包(后缀名为.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
}
更多推荐
已为社区贡献1条内容
所有评论(0)