uni-app 中使用外部第三方字体（非字体图标）

2024-04-12 10:24:28

本文同步发布在：uni-app 中使用外部第三方字体（非字体图标）

在用 uni-app 进行前端开发的过程中，客户可能会要求某些文字采用特殊的字体（如：微软雅黑、草书等）。如果字体文件太大，可以将需要的字单独提取出来使用，具体方法步骤如下：

字体下载

找到需要的字体并下载，一般为 ttf、otf 类型的文件。注意：有些字体需要商业授权，如果用在商业项目上使用有侵权风险，请先购买授权。

文字提取

通过文字提取工具（如果链接已失效，请搜索其他相关功能的页面提取），上传字体文件后，输入要提取的文字并填写自定义字体名称，提取成功后下载到本地。

字体引入

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

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

字体使用

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

.class {font-family: my-font
}

注意事项

如果要导入整个字体，可以省略步骤“字体提取”，但是如果字体文件太大，可能导致加载非常慢。建议非必要时，按需提取。
由于小程序不支持在 css 中使用本地字体文件，需以base64方式方可使用。而字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式，但大于等于 40kb，需人工手动转换（如果链接已失效，请搜索其他相关页面进行转换）。

@font-face {font-family: my-font;src: url(data:application/font-ttf;charset=utf-8;base64,生成出来的base64字符串) format('truetype');
}

本文同步发布在：uni-app 中使用外部第三方字体（非字体图标）

uni-app 中使用外部第三方字体（非字体图标）相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
某app中的一些第三方技术
1)旷视的人脸识别和追踪技术 https://github.com/FacePlusPlus/MegviiFacepp-Android-SDK 2)kawaii播放器 https://github.c ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
java安卓字体_Android中添加外部字体库和竖直排列字体
一.在Android开发中会遇到系统提供的字体并不能满足自己对字体的设计需要,这就需要引进外部字体库了.下面简述一下如何引入外部字体库. 1>在自己工程文件目录下新建一个assets文件夹,在a ...
APP中的第三方“支付”功能该如何测试
经过最近几个项目的测试,APP中带有支付功能的产品有很多,那么APP中带有第三方支付功能的产品在这一模块该如何测试才尽可能的测试完整. 正常流程: 正常使用支付宝.微信.银行卡(目前使用最多的第三方支 ...
CAD中插入外部参照字体会变繁体_知道这些技巧-轻松攻克CAD所有困难
28.如何使图形只能看而不能修改? 要是自己的图把它全部图层锁定就行了,打开不会变的:如果以后不想用了,就把里面所有东西都炸碎也可以:还有一种方法是用lisp语言写个加密程序,一旦运行后,图就只能看, ...
CAD中插入外部参照字体会变繁体_为什么CAD插入外部参照时会提示错误无效？
本公众号文章分类索引,点击可打开分类文章列表: 安装文件异常.退出复制粘贴基本操作快捷键设置界面捕捉视图坐标定位选择.组图层颜色表格线型二维绘图多段线填充图块标 ...
在js或者App中，调起第三方地图产品（URI API）的汇总
URI API是为开发者提供直接调起第三方地图产品(Web地图.地图手机客户端)以满足特定业务场景下应用需求的程序接口,开发者只需按照接口规范构造一条标准的URI,便可在PC和移动端浏览器或移动开发应 ...
导入外部字体且带字体压缩，以及判断h5，app，微信小游戏环境和字体的具体实现方式（egret为例）
1.压缩字体方式因为一般项目中不需要用到所有字体,所以需要将需要的字体在字体包提取出来重新打字体包我选择的压缩字体方式是 :使用fontmin进行字体压缩 fontmin官网为: https:// ...

最新文章

热门文章