关于uniapp中如何使用阿里字体库的字体

原创于 2025-06-22 20:16:22 发布 · 355 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #阿里妈妈字体 #微信小程序

一、首先在阿里字体图标库选择自己需要的字体

iconfont-阿里巴巴矢量图标库

二、可以选择下载整个字体包或者下载部分自己需要的文字

1、如果不怕包太大可以下载整个字体包

我们是在小程序中为例，所以只下载“我是一只”这四个字的子集

2、这里我们下载之后获得两个文件

3、在https://transfonter.org/ 转换一下woff文件

4、在uniapp或者原生小程序中使用

4.1、复制转换好的文件到我们小程序的目录中

4.2、在app.vue中引入

4.3、页面中使用

/* 使用示例 */
<view class="card">
  <text style="font-size: 100rpx; font-family: 'Alimama DaoLiTi'">一只</text>
</view>

4.4、效果

三、注意事项

确保字体文件已上传到小程序项目目录中
如果字体文件较大，可能会影响页面加载速度
某些小程序平台对自定义字体有大小限制（如微信小程序要求字体文件不超过 40KB）
注意小程序中可能不支持所有 CSS 字体格式，通常 TTF 或 WOFF 格式比较可靠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

正义的大古

关注关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniApp开发小程序引入字体uni.loadFontFace和阿里巴巴字体库使用

q1740706590的博客

12-30

1403

在app.vue中调用。

【uniapp引入阿里字体图标】

ytfty24124的博客

10-28

671

nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

参与评论您还未登录，请先登录后发表或查看评论

uniapp使用第三方字体

qq_43024468的博客

02-27

966

uniapp引入使用第三方字体

uniapp添加阿里字体图标库图标

beConcentration的博客

01-05

754

字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式复制阿里矢量图标库->我的项目->Unicode->查看在线链接的@font-face并替换iconfont.css的@font-face，并在每个链接前添加https: 3.本地图标方式 iconfont.css中用下方代码替换@font-face @font-face { font-family: 'iconfont'; src: url('@/styl

uniapp 引入阿里字体图标iconfont

weixin_43877778的博客

10-21

2492

uniapp 引入阿里字体图标iconfont

uni-app 小程序引入字体图标

qq_18314469的博客

06-04

2493

我的项目引入的是阿里巴巴的图标库。将下载的阿里巴巴图标库中的 iconfont.css 文件，复制到项目的 commoncss文件夹下面，如下所示，可以修改一下文件名：然后修改该文件夹中的内容，由于文件中引用到的其它文件在项目中都不存在，可直接删除掉，只留下 “data” 开头的路径，如下图红线部分：注意：路径最后只剩下一个，这行代码的结尾一定是 “ ; ” (封号，载过坑) ...

uniapp笔记——使用字体包(.ttf)

weixin_44792197的博客

09-25

4035

一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。字体转换网站：https://www.giftofspeed.com/base64-encoder。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；先选择.ttf文件,白色方框里面就是base64格式的文件。在app.vue引入，全局可用。

uniapp 中使用不同字体

热门推荐

唐僧的专栏

04-19

2万+

官方文档 uniapp 字体展示效果 : uniapp 多种字体的显示 H5网页 Android IOS uni.loadFontFace({ family: 'Bitstream Vera Serif Bold', source: 'url("https://sungd.github.io/Pacifico.ttf")', success() { console.log('success') } }) （官方）注意: 引入中文字体，体积过大时会发生错...

五 uniapp的微信小程序中正确使用阿里巴巴字体元素iconfont

无

07-14

779

上一章节的认识上一章节我们一起了解了微信小程序的定位，调用第三方导航等功能，传送门遇到的问题当我们将微信小程序进行上传的时候，也许你会收到微信的反馈，XXX文件未被上传，这是因为微信在服务器内设置了只可以上传它定义的名称类型下面是微信上传的文件类型可上传文件类型因此我们的字体样式iconfont.eot等是不能上传的，若上传则显示未上传成功，如图所示：解决方式打开网址https://www.iconfont.cn/，注册登录，新建一个项目，如图：然后进入图标库中搜索我们想要的图标，

uniapp字体图标的使用

12-31

在uniapp中，我们可以借助第三方字体库如Ionicons、FontAwesome或者自定义的字体库来引入这些图标。二、引入字体图标库 1. 安装字体库：首先，你需要选择一个字体图标库，例如Ionicons，通过npm命令行工具进行安装...

解锁UniApp新姿势：巧用阿里巴巴字体图标库

Jiaberrr的博客

02-13

1137

在UniApp开发中，图标是构建用户界面不可或缺的元素。一个简洁美观的图标，能够让应用的界面更加生动直观，提升用户体验。然而，在众多的图标资源中，如何选择合适的图标库并正确使用，成为了开发者需要面对的问题。阿里巴巴字体图标库，作为国内知名的图标资源平台，拥有丰富多样的图标资源，涵盖了各种场景和行业，为开发者提供了极大的便利。本文将详细介绍在 UniApp 中使用阿里巴巴字体图标库的方法和具体步骤，帮助大家快速掌握这一技能，提升开发效率。

uniapp——如何在项目中使用阿里字体图标

qq_51480864的博客

02-11

1586

如何在uniapp中使用阿里字体图标

uniapp app使用阿里字体图标

最新发布

06-24

- **性能优化**：如果项目中使用的图标较少，可以手动裁剪 `iconfont.css` 文件和字体文件，仅保留必要的图标，以减少资源体积[^3]。 --- ### 三、总结通过以上步骤，可以在 UniApp 项目中成功集成和使用阿里云...

uniapp如何引入阿里字体图标

weixin_45799605的博客

03-21

1898

下载后的模板将其引入到项目static目录创建font目录下一定要创建一个目录不然会出问题… 接下来看官方文档注意这三点打开demo.html //右边 { "color": "#FFFF00", "float": "right", "fontSize": "40px", "fontSrc": "/st...

uniapp 如何引用icon 字体

web修理工

10-12

976

平时使用阿里巴巴的iconfont字体需要下载字体到本地或通过网址引入字体才能使用，但有些情况可能不允许这么做，例如小程序与平常web开发中引入字体图标的方式不一样，必须先转为base64再引入，以下介绍iconfont字体转base64并引入使用的方法。4.下载后，得到一个压缩文件，解压后，会有一个stylesheet.css的css文件，2.在阿里巴巴下载的css文件里，将除了@font-face之外的代码复制到自己项目里。2.配置完选项，添加ttf文件（刚从阿里巴巴里下载的文件夹里）并开始转换了。

uniapp使用阿里字体图标库

YingDaoMonkey的博客

08-01

811

uniapp标签内使用阿里字体图标和顶部导航栏使用阿里字体图标

uniapp中使用字体图标

panzina的博客

04-12

5074

从阿里图标库中下载，并放入项目中打开iconfont.css，添加~@/static/iconfont。注意：圈起来的这行不用在App.vue中引入使用

uniapp引入阿里字体

01-16

### 如何在 UniApp 中添加并使用阿里巴巴字体图标库 #### 准备工作为了确保项目顺利集成阿里巴巴矢量图标库，建议遵循一些基本原则：一个项目中最好只使用一个 `iconfont` 文件，防止 Unicode 码重复引起的图标显示错误；项目的图标最好是只增加不删除，以便于后期维护[^2]。 #### 创建与配置项目前往阿里字体图标的官方网站 https://www.iconfont.cn/ 进行操作。挑选所需的图标并将其加入购物车，随后通过点击右上角的购物车来查看已选中的图标，并将这些图标正式添加到个人发起或是参与的项目里，在资源管理下的“我的项目”部分可以找到它们。 #### 下载与导入文件完成上述步骤后，下载所创建的图标集至本地环境，并重命名该文件夹以方便后续引用。接着，把此文件夹纳入到 UniApp 工程结构内。 #### 修改 CSS 和 Vue 组件编辑位于 font 文件夹内的 `iconfont.css` 文件，依据实际需求调整样式设置。然后，在应用入口文件 `App.vue` 或者具体页面组件中引入这个自定义样式的链接： ```css /* App.vue */ <style> @import url('/static/font/iconfont.css'); </style> ``` #### 使用图标最后一步是在页面布局中标记想要展示的位置处插入相应的 HTML 标签。可以通过两种方式实现这一点： - **直接书写标签**：利用 `<view>` 元素配合特定类名调用所需图标。 ```html  <template> <view class="icon icon-showye"></view>  </template> ``` - **复制粘贴代码片段**：从 demo_index.html 的 Unicode 列表中选取目标图标的编码形式，再嵌入到应用程序界面中[^3]。