uni.app 使用本地自定义字体

最新推荐文章于 2025-05-21 14:56:09 发布
原创 最新推荐文章于 2025-05-21 14:56:09 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

本文介绍了在uni.app开发过程中如何引入并使用本地自定义字体。当uni.app打包为H5页面时，字体能自适应系统设置，但打包成APP时则无法自动适配。为解决此问题，你需要下载字体文件，然后在`app.vue`中引入，并在页面中指定class应用字体。通过这些步骤，你可以确保uni.app应用内的内容正确显示自定义字体。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写自定义目录标题

uni.app 使用本地自定义字体

前一短时间，在使用uni.app 开发APP的时候，需要使用自定义字体，使用uni.app打包的H5页面，可以自适应系统的字体。但是在打包APP的时候，无法自适应手机系统的文字。

由于uni.app的顶部导航是原生的，所以顶部导航可以自适应系统的文字。页面里面的内容无法使用字体。

我们们要从网上下载一些字体文件
在这里插入图片描述
然后在 app.vue的页面引入 字体
在这里插入图片描述

最后 在页面写入class
在这里插入图片描述

uniapp 添加字体ttf
tengyuxin的博客
05-31 1895
在uniapp中使用字体，一共分成两种情况，一种是普通vue页面，一种是nvue页面引入字体。。
uni-app使用字体包(.ttf)、字体转换格式和不转换字体方式
qq_36529240的博客
03-21 1701
如果你用的是less或者scss在App.vue文件style添加 lang="scss"或者 lang=“less”一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；本地字体文件小于40kb，直接引入使用。选择字体，然后复制base64代码，App.vue全局引用。
uniapp 引入本地字体
qq_33444716的博客
04-09 1703
1. 直接将font.ttf文件转换成base64格式 2. 上传文件后直接点击convert（转换），点击下载后解压，找到css文件复制到项目中 3. 在项目中使用如下 3.1 打开文件teeanger.css，会发现里面teeanger.css发现字体的名称如下： font-family: 'FZShaoEr-M11S'; 3.2 在全局css中引入如下的css样式： @import "@/common/css/teeanger.css"; 3.3 然后在全局css
uni-app 动态加载字体
最新发布
IMMultiPlatform的博客
05-21 359
本文讨论了 uni-app 动态加载字体的相关内容，介绍了加载字体的方法、支持平台、代码示例、注意事项以及推荐方式等。：使用 uni.loadFontFace(Object object) 进行动态加载字体。：支持 App、H5、微信小程序（app-nvue 不支持本 api）。：展示了使用 uni.loadFontFace 加载字体的具体代码，设置了字体名称、资源地址、字体样式等参数。
uniapp加载本地字体包思源黑体，并解决字体包太大报错问题
weixin_43773218的博客
02-27 3095
当字体包文件太大，比如我这思源黑体达到了7M，甚至十几M，便会报错RangeError: Maximum call stack size exceeded
uniapp使用第三方文字，本地文字
luweisixsix的博客
10-12 1351
uniapp使用本地字体图标两种方式。
uni-app中使用自定义字体
Stitch_xiao的博客
12-09 759
【自用】uni-app中使用自定义字体_duyanke888的博客-优快云博客_uniapp 自定义字体
uni-app-小程序自定义底部菜单样式示例
08-12
2. 在每个页面的配置（例如：pages/index/index.vue）中，使用自定义的底部导航组件，并通过`uni-app`的`mpvue-page-factory`将页面实例传递给组件，以便于获取当前页面索引。 ```html <!-- 页面内容 --> ... ...
uni-app-自定义标题栏示例.zip
08-12
【uni-app自定义标题栏示例】是一个基于uni-app框架的源码分享，适用于开发者们在构建跨平台移动应用时自定义应用标题栏的需求。uni-app是一个由DCloud（即海马云）推出的开源项目，它允许开发者使用Vue.js语法编写...
自定义字体在uni-app：打造独特视觉体验的艺术
07-12
uni-app 是一个使用 Vue.js 开发跨平台应用的框架，它允许开发者编写一次代码，然后发布到不同的平台，包括 Web、iOS、Android、以及各种小程序平台（如微信/支付宝/百度等小程序）。uni-app 由 DCloud 公司开发和...
uni-app开发 自定义底部Tap等基础使用与介绍
ou2914671339的博客
06-16 474
新手使用HbuilderX开发uni-app的一些事项 基础使用 和底部Tap的自定义与使用。uni-app支持自定义底部导航栏，通过配置pages.json及编写Vue组件，实现多页面间快速切换。简单配置，灵活定制，提升用户体验
在uniapp的小程序中使用自己的字体库
liangyiyiliang的专栏
06-10 4566
很多人下载字体库都是在阿里字体库找字体下载字体。但是我还是喜欢这个这个网站弄字体1.假设我们找一个网站上面发现了不错的字体1.1 我们打开控制台然后在网络中过滤woff，就找到了字体文件 1.2 在网上找到字体转svg的网站 TTF转SVG - 在线转换图像文件 （我用ttf转svg不理想，用woff2文件转）可以下载文件也可以直接复制链接使用链接的方式 然后将转化后的文件下载下来2.生产字体打开这个网站 IcoMoon App - Icon Font, SVG, PDF & PNG Generato
[保姆级教程]uniapp设置字体引入字体格式
肥晨开发的学习之路
06-21 5834
在 UniApp 中设置和引入自定义字体（如 .ttf、.woff、.woff2 等格式）通常涉及几个步骤。但在 UniApp 中，可能需要直接使用相对路径或绝对路径。确保路径指向字体文件。文件夹下的文件不会被 Webpack 处理，而是直接复制到最终的打包目录中。行业内幕，洞察先机。确保有权使用这些字体，并遵守任何相关的许可协议。是 Vue CLI 项目中常用的别名，它指向。将字体文件放入你的 UniApp 项目的。首先，你需要有字体文件。部分或单独的 CSS 文件），使用。规则来定义你的字体。
uniapp 全局自定义字体
weixin_35752645的博客
01-11 2163
在 uni-app 中，你可以通过全局样式(global style)的方式设置自定义字体。首先，你需要将字体文件放入项目中，然后在 main.js 文件中引入该字体文件，最后在全局样式中设置 font-family 即可。 示例: 将字体文件放入项目中 main.js 中引入字体import './static/fonts/custom-font.css' ...
Uniapp 使用自定义字体
Cxiaomu的博客
12-01 878
uniapp 使用自定义字体。为了更好的还原UI图片效果，往往需要使用特殊字体，引入字体包。因实际业务运行平台在微信小程序上，对发布包的项目文件大小有限制，项目中某些比较大的静态资源需要放在服务器上来远程加载，比如图片、字体包。
uniapp中引入字体本地和在线引入。
热门推荐
weixin_45803990的博客
07-15 1万+
本地引入字体文件，ttf格式，查看文件属性大小，字体图标超过40k需要转换。 可以转换成css文件格式的或者是其他格式的， 再引入即可，闲了再写
uniapp引入本地字体
记录本人工作中遇到的问题、经验总结以及分享。
06-14 935
官方文档说明使用方法
【自用】uni-app中使用自定义字体
qq_34378032的博客
01-11 8785
步骤一：拿到自定义字体包 ​ 首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。 步骤二：判断字体包是否需要转换 ​ 由于小程序不支持在 css 中使用本地字体文件，需以base64方式方可使用。而字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式，但大于等于 40kb，需人工手动转换。字体转换网站 步骤三：字体引入 将导出的字体文件中的 *.ttf 文件放入项目 static 文件夹中，并在 App.vue st
uniapp自定义字体类型
zcc88999的博客
11-27 423
uniapp自定义字体类型
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值