uni-app nvue/vue 引入第三方字体教程，在线ttf转base64和在线识别字体网站分享
2024-05-10 06:02:08
说明
在我们日常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-NVUEconst 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-NVUEconst 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)
听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！
uni-app nvue/vue 引入第三方字体教程，在线ttf转base64和在线识别字体网站分享相关推荐
- 11.Vue引入第三方
Vue引入第三方 swiper官网 swiper之vue 在GitHub搜索vue组件 vue官方整理的优秀第三方
- vue引入第三方js的方案 报错
vue引入第三方js的方案 报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载 所以只能通过外部引用 使用方法如下: 1.首先是第三方js包存放的位置 一定要放在 st ...
- vue引入第三方html,vue.js如何引入第三方模块？
vue.js如何引入第三方模块?下面本篇文章给大家介绍一下Vue中正确引入第三方模块的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.js如何引入第三方模块? 方法一: ...
- 11.vue引入第三方库,以Swiper为例
Swiper 开源.免费.强大的触摸滑动插件 Swiper 是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端 Swiper 能实现触屏焦点图.触屏Tab切换.触屏轮播图切换等常 ...
- Vue引入第三方字体
下载第三方字体放在assets/font目录下 再新建一个font.css @font-face {font-family: "TsangerYuYangT_W02_W02";sr ...
- Vue引入第三方js库
情况一:无法通过npm install安装包引入 方法一:在index.html中引用script 直接在index.html中引用script,任何时候皆可用!! 注意:第三方js必须放在stati ...
- VUE 引入第三方js包 及调用
1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js ...
- html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一.下载vue . js:然后在HTML中添加vue.js包,其语法为"script src ...
- vue引入第三方原生js库
1.public下index.html引入 2.vue.config.js configureWebpack申明一下需要调用的function,这些名称都是第三方js里有的 3.直接需要的页面 imp ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '-/a' 2.import ' ...
最新文章
- 程序员晒元宵节福利，网友：看了我想砸键盘......
- Java数组在内存中是如何存放的
- python selenium自动化（三）Chrome Webdriver的兼容
- indy10 UDP实例
- 美国重金投资3D芯片项目！MIT+美独资公司攻关，旨在继续领先中国
- hadoop2.6分布式环境搭建
- LINUX开机，直接进入终端，如何加载硬盘
- css背景颜色设置为半透明,关于css设置背景色透明，半透明
- 保存的离线网页总是自动跳转
- amd一键超频怎么用_(完整版)超频必看AMD_CPU超频教程
- python中stop_thread_Python threading.Thread只能用私有方法self来停止.__ Thread_stop()
- docker run 挂载卷_Docker容器数据卷-Volume小结
- linux中/etc/hosts文件的含义
- CSMA/CD协议分析
- 杰理之使用 mic_rec_play_start()测试 mic 无声的解决方法【篇】
- uniapp实现微信小程序点亮发送给朋友权限
- 武汉新华电脑学校计算机协会,第十一届大学生计算机应用能力与信息素养大赛·武汉新华颁奖典礼圆满落幕！...
- 简单解释“DNA动了”是什么意思？
- Unity批量修改FBX模型
- css图片自适应容器大小 完整展示