uni

您所在的位置：网站首页 › vue引入ttf文件 › uni

uni

2024-03-05 13:45| 来源: 网络整理| 查看: 265

说明

在我们日常Web开发过程中，经常会遇到内置UI字体和图标不能满足场景，需要额外的使用一些字体或者图标，一般常用的就是使用阿里图标库，非常方便，下面就介绍一下，基于uni-app nvue/vue 中引入第三方字体的处理过程。

uni-app vue 引入第三方字体

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

支持 base64 格式字体图标。

支持网络路径字体图标。

小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。

需以 base64 方式方可使用。

网络路径必须加协议头 https。

从 www.iconfont.cn (opens new window)上拷贝的代码，默认是没加协议头的。

从 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;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') } 一个完整示例限时精选主编力荐猜你喜欢 @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; }

uni-app nvue 引入第三方字体

由于nvue 不支持style 方式导入所以全局的字体定义对于nvue是没有效果的，所以只能局部在次定义，这里需要使用weex内置的api 。

官网说明：uniapp.dcloud.io/tutorial/nv…

Weex 提供 DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfont 和 custom font。开发者可以使用下面的代码加载自定义字体：

限时精选主编力荐猜你喜欢 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 } } .test { font-family: cmet1sx1z5a-1; margin-left: 20rpx; }

这是一个加载base64编码的示例

限时精选主编力荐猜你喜欢 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 } } .test { font-family: cmet1sx1z5a-1; margin-left: 20rpx; font-size: 20px; }

预览效果

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）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。如果你使用 www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，但极大可能发生冲突。调用addRule 在 beforeCreate 中是被推荐的。

尤其注意

nvue 下定义class 引用字体时，不能用单引号/双引号，我感觉是官网的bug eg：font-family: cmet1sx1z5a-1; 这里不应字符串

ttf 在线转base64 ，在线识别图片字体

giftofspeed 将ttf文件转换base64

www.giftofspeed.com/base64-enco…