说明
在我们日常Web开发过程中,经常会遇到内置UI字体和图标不能满足场景,需要额外的使用一些字体或者图标,一般常用的就是使用阿里图标库,非常方便,下面就介绍一下,基于uni-app nvue/vue 中引入第三方字体的处理过程。
uni-app vue 引入第三方字体
uni-app
支持使用字体图标,使用方式与普通 web
项目相同,需要注意以下几点:
-
支持 base64 格式字体图标。
-
支持网络路径字体图标。
-
小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。
需以 base64 方式方可使用。
-
网络路径必须加协议头
https
。 -
从 http://www.iconfont.cn (opens new window)上拷贝的代码,默认是没加协议头的。
-
从 http://www.iconfont.cn (opens new window)上下载的字体文件,都是同名字体(字体名都叫 iconfont,安装字体文件时可以看到),在 nvue 内使用时需要注意,此字体名重复可能会显示不正常,可以使用工具修改。
-
使用本地路径图标字体需注意:
-
为方便开发者,在字体文件小于 40kb 时,
uni-app
会自动将其转化为 base64 格式; -
字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用;
-
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
这里优先推荐使用在线的网络地址引用,其次本地,base64
- 本地方式引入字体
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
- http或https 引入字体
@font-face {
font-family: 'cmet1sx1z5a-1';
src: url('https://at.alicdn.com/t/webfont_cmet1sx1z5a.ttf') format('truetype');
}
- base64方式引入字体
@font-face {font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL0AA8AAAAABygAAAKbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBlYAgnoIBBEICoJsglgLDgABNgIkAxQEIAWDJAdGFyQYFBv/BciOw7ixa1ZxiY23eHh+f///Y66Nux/FhAQhyU3NSP5Q/c1NSBDO/67tD7WQ9ui7c8Q0JDFPHa+SSI2QCJWpUzVjW3RaxAMco0lL5Ckf4iUW0rXbnrdU0lqEOhaIFJC6Oz37tE07hBSHSHO75OEgBLx97VPBJ8kJJ2yPilegoBhRXCY6m+LsXRtTc5Isg3pN+Tqft35/Um78f6NPfiK6IgA5MvREgfkQ2EUq0FNuKCqVxOetz1/+/UmtFv6T0+5auxnqhRCAxuiM8H8AWiHUOsghSgIQCQkAEPhcM4tmiFpNAiVoiArLgTOAHIMlkEDI8/rNlzc42GT/Wn29hv+ceieOv3v6bcf2Lfy+u+he/dxtAJm8VYczyRd0lav9cMalNy8NXi1vvjWbcHsysX4m5nFbFktrcu85vrLjs9o6oz6fN+GzxdPT+uPBD2as3/Uz8TZ8oXkifjSDPNTtse6PJqiX4kkGxDHwdBgy8V2X+457uiw+imyWjBKWYUX4TF0Z/wIeWw4Ek164dntVk4m/VQMqOzV25v+vllvLdqgkEJTt7A/yUgXKrRAAIE/fmglI96kUeTYuxgmUOkogIQSmogCVjRBIGussQGakiwIUGvgUApTaRU+ZyOtJOpLUzGZELbT2xjFKw/1ojo6Wtjlipo6hlqqKuRl4MHTJd+czX63MZwCzjQzNxYxMtTRgww02VFfjdTXPyNxIWcXQTFkYGe/0wFEGGSH8cEMN5/r4NGQb01YDcxSDXTg3mo/KleGsHCbrmHUgEp4cChAs1CAw06ERYMPoCtxrebMUA/riweQLAiSgxka8rkRIkSKLvG73zk7UZrN7LsyePmYLxgA1lbb+N85Llf9fjS/KdggAkFeKBYCKorl+aCsA')
}
- 一个完整示例
<template>
<view>
<view>
<text class="test">限时精选</text>
<text class="test">主编力荐</text>
<text class="test">猜你喜欢</text>
</view>
</view>
</template>
<style>
@font-face {
font-family: 'cmet1sx1z5a-1';
src: url('https://at.alicdn.com/t/webfont_cmet1sx1z5a.ttf') format('truetype');
}
.test {
font-family: "cmet1sx1z5a-1";
margin-left: 20rpx;
}
</style>
uni-app nvue 引入第三方字体
由于nvue 不支持style 方式导入 所以全局的字体定义对于nvue是没有效果的,所以只能局部在次定义,这里需要使用weex内置的api 。
官网说明:https://uniapp.dcloud.io/tutorial/nvue-api.html#dom
Weex 提供 DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfont 和 custom font。开发者可以使用下面的代码加载自定义字体:
<template>
<view>
<view>
<text class="test">限时精选</text>
<text class="test">主编力荐</text>
<text class="test">猜你喜欢</text>
</view>
</view>
</template>
<script>
export default{
beforeCreate() {
// #ifdef APP-NVUE
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
'fontFamily': "cmet1sx1z5a-1",
'src': "url('https://at.alicdn.com/t/webfont_cmet1sx1z5a.ttf')"
});
// #endif
}
}
</script>
<style>
.test {
font-family: cmet1sx1z5a-1;
margin-left: 20rpx;
}
</style>
这是一个加载base64编码的示例
<template>
<view>
<view>
<text class="test">限时精选</text>
<text class="test">主编力荐</text>
<text class="test">猜你喜欢</text>
</view>
</view>
</template>
<script>
export default{
beforeCreate() {
// #ifdef APP-NVUE
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
'fontFamily': "cmet1sx1z5a-1",
'src': "url('data:font/truetype;charset=utf-8;base64,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')",
});
// #endif
}
}
</script>
<style>
.test {
font-family: cmet1sx1z5a-1;
margin-left: 20rpx;
font-size: 20px;
}
</style>
预览效果
addRule(type, contentObject)
-
@fontFace 协议名称,不可修改。
-
@fontFamily
font-family
的名称。 -
@src 字体地址,url(’’) 是保留字段,其参数如下:
-
http. 从HTTP请求加载, e.g.
url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
-
https. 从HTTPS请求加载, e.g.
url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
-
local, Android ONLY. 从assets目录读取, e.g. url(‘local://foo.ttf’), foo.ttf 是文件名在你的assets目录中.
-
file. 从本地文件读取, e.g.
url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
-
data. 从base64读取, e.g.
url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')
, 上述data字段不全且base64不要换行。
注意
addRule 方法里的 fontFamily 可以随意取。这个名字不是字体真正的名字。字体真正的名字(font-family),也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字(font-family)足够特殊,否则在向系统注册时可能发生冲突,导致注册失败,你的字符被显示为‘?’。如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中,设置一个特殊的 font-family 名字。默认是 “iconfont”,但极大可能发生冲突。调用addRule 在 beforeCreate 中是被推荐的。
尤其注意
nvue 下定义class 引用字体时,不能用单引号/双引号 ,我感觉是官网的bug eg:font-family: cmet1sx1z5a-1; 这里不应该是字符串
ttf 在线转base64 ,在线识别图片字体
- giftofspeed 将ttf文件转换base64
https://www.giftofspeed.com/base64-encoder/
- Transfonter
Transfonter是在转换字体时使用的工具,这样你就可以在web上使用它们。它支持许多不同的格式,比如TTF、EOT、WOFF、WOFF2和SVG。
网址:https://transfonter.org/
- 在线识别图片字体
入口:https://so.17font.com/
是一个在线求字、找字的网站,通过上传图片,还可以通过裁剪工具更进一步
选取文字,进行识别,挺准确的
如果觉得对你有帮助的话,请点赞或关注下面的公众号,就是对我的最大支持
点击下方卡片/微信搜索,关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)
听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀!!