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

最新推荐文章于 2025-11-08 10:30:47 发布
原创 最新推荐文章于 2025-11-08 10:30:47 发布 · 1.6k 阅读 · 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应用内的内容正确显示自定义字体。

这里写自定义目录标题

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

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

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

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

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

精选资源
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语法编写...
uniapp笔记——使用字体包(.ttf)
weixin_44792197的博客
09-25 4214
一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。字体转换网站：https://www.giftofspeed.com/base64-encoder。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；先选择.ttf文件,白色方框里面就是base64格式的文件。在app.vue引入，全局可用。
UniApp 全局使用字体教程
最新发布
weixin_47873655的博客
11-08 694
UniApp 全局字体设置指南 在 UniApp 项目中实现全局字体统一： 1️⃣ 将字体文件（如 YouYuan.ttf）放入 /static/fonts/ 目录 2️⃣ 在 App.vue 中通过 @font-face 注册字体 3️⃣ 设置全局样式 font-family: 'YouYuan' 4️⃣ 注意不同平台路径写法差异（H5用/static/，App用@/static/） 5️⃣ 遇到问题可排查路径、文件名或重新打包 6️⃣ 支持单独页面使用或全局应用 ✨ 完成设置后，项目所有页面将统一显示指
uni-app 项目中使用自定义字体
Bruce__taotao的博客
09-09 623
在 uni-app 项目中使用自定义字体确实存在一些兼容性问题。// 只在 H5 平台使用自定义字体// 通用字体设置sans-serif;
重磅更新-UniApp自定义字体可视化设计
luck332的专栏
06-28 852
重磅更新-UniApp自定义字体可视化设计。DIY可视化为了适配不同APP需要，支持用户自定义字体，自定义字体后，设计出来的界面更多样化，不再是单一字体效果。用户可以使用第三方字体加入设计，在设计的时候选择上自己的字体，对应内容变成了自己想的个性化字体界面。
uniapp 引入本地字体
qq_33444716的博客
04-09 1765
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
uniapp 本地字体文件的使用
hxxht的博客
06-13 355
uniapp中本地字体文件的使用
uniapp加载本地字体包思源黑体，并解决字体包太大报错问题
weixin_43773218的博客
02-27 3521
当字体包文件太大，比如我这思源黑体达到了7M，甚至十几M，便会报错RangeError: Maximum call stack size exceeded
uniapp使用第三方文字，本地文字
luweisixsix的博客
10-12 1382
uniapp使用本地字体图标两种方式。
uni-app使用字体包(.ttf)、字体转换格式和不转换字体方式
qq_36529240的博客
03-21 1838
如果你用的是less或者scss在App.vue文件style添加 lang="scss"或者 lang=“less”一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；本地字体文件小于40kb，直接引入使用。选择字体，然后复制base64代码，App.vue全局引用。
自定义字体在uni-app：打造独特视觉体验的艺术
07-12
uni-app 是一个使用 Vue.js 开发跨平台应用的框架，它允许开发者编写一次代码，然后发布到不同的平台，包括 Web、iOS、Android、以及各种小程序平台（如微信/支付宝/百度等小程序）。uni-app 由 DCloud 公司开发和...
uni-app中自定义字体实现跨平台视觉统一
在uni-app中使用自定义字体，主要通过CSS的`@font-face`规则来实现。开发者可以将所需的字体文件（如.ttf、.woff等格式）放置于项目的静态资源目录下（通常为`static/fonts/`），然后在全局样式文件（如`App.vue`中...
uni-app中使用自定义字体
Stitch_xiao的博客
12-09 791
【自用】uni-app中使用自定义字体_duyanke888的博客-优快云博客_uniapp 自定义字体
在uniapp的小程序中使用自己的字体库
liangyiyiliang的专栏
06-10 4687
很多人下载字体库都是在阿里字体库找字体下载字体。但是我还是喜欢这个这个网站弄字体1.假设我们找一个网站上面发现了不错的字体1.1 我们打开控制台然后在网络中过滤woff，就找到了字体文件 1.2 在网上找到字体转svg的网站 TTF转SVG - 在线转换图像文件 （我用ttf转svg不理想，用woff2文件转）可以下载文件也可以直接复制链接使用链接的方式 然后将转化后的文件下载下来2.生产字体打开这个网站 IcoMoon App - Icon Font, SVG, PDF & PNG Generato
[保姆级教程]uniapp设置字体引入字体格式
肥晨开发的学习之路
06-21 6545
在 UniApp 中设置和引入自定义字体（如 .ttf、.woff、.woff2 等格式）通常涉及几个步骤。但在 UniApp 中，可能需要直接使用相对路径或绝对路径。确保路径指向字体文件。文件夹下的文件不会被 Webpack 处理，而是直接复制到最终的打包目录中。行业内幕，洞察先机。确保有权使用这些字体，并遵守任何相关的许可协议。是 Vue CLI 项目中常用的别名，它指向。将字体文件放入你的 UniApp 项目的。首先，你需要有字体文件。部分或单独的 CSS 文件），使用。规则来定义你的字体。
uniapp自定义字体适配
AlibabaOld的博客
11-07 1059
第一步中定义的fontFamily值代表自定义字体名称，和第二步里css font-family对应。1.使用uniapp相关api在页面被创建之前导入字体。2.在css中定义自定义字体。
uniapp 全局自定义字体
weixin_35752645的博客
01-11 2210
在 uni-app 中，你可以通过全局样式(global style)的方式设置自定义字体。首先，你需要将字体文件放入项目中，然后在 main.js 文件中引入该字体文件，最后在全局样式中设置 font-family 即可。 示例: 将字体文件放入项目中 main.js 中引入字体import './static/fonts/custom-font.css' ...
Uniapp 使用自定义字体
Cxiaomu的博客
12-01 1042
uniapp 使用自定义字体。为了更好的还原UI图片效果，往往需要使用特殊字体，引入字体包。因实际业务运行平台在微信小程序上，对发布包的项目文件大小有限制，项目中某些比较大的静态资源需要放在服务器上来远程加载，比如图片、字体包。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值