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

最新推荐文章于 2024-04-10 11:11:02 发布
最新推荐文章于 2024-04-10 11:11:02 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： uni.app 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangzi_mm/article/details/127834249
版权

这里写自定义目录标题

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

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

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

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

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

吃不胖的_胖胖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
uniapp如何应对不同端字体大小的问题
qq_41304029的博客
06-13 3868
可以使用postcss-pxtorem插件将css中的px单位自动转换为rem单位，再在html的样式表中设置基准字体大小。具体而言，对于常见的1倍设备像素比，1个设备像素对应1个实际像素；而对于2倍设备像素比，1个设备像素对应4个实际像素；对于3倍设备像素比，1个设备像素对应9个实际像素。相比较rem和px的适配方案，使用vw和vh单位还需要更加细致的计算。通过设置不同的vw和vh值，可以在不同尺寸的设备上适应字体大小。针对不同设备像素比，需要设置不同的字体大小。3.基于设备像素比设置字体大小。
uniapp 引入并使用外部字体
weixin_44805839的博客
09-25 2507
uniapp 引入并使用外部字体
uniApp使用textarea,默认高度且文字多后自适应设置
最新发布
weixin_45395283的博客
04-10 1377
【代码】uniApp使用textarea,默认高度且文字多后自适应设置。
uni-app自适应遇到的坑
热门推荐
weixin_44770377的博客
11-01 1万+
uni-app自适应遇到的坑 一、css中font不支持简写方式，这样的结果就是导致手机上运行项目，字体都变大了！把样式都挤变形了 如：font：bold 28rpx； 需改成如下非简写形式 font-size:28rpx; font-weight:bold; 二、css的height高度问题 用了rpx单位，结果还是不会自使用屏幕大小！长的手机下面会有空白，短的手机不会 解决方法： ...
在uniapp的小程序中使用自己的字体库
liangyiyiliang的专栏
06-10 3833
很多人下载字体库都是在阿里字体库找字体下载字体。但是我还是喜欢这个这个网站弄字体1.假设我们找一个网站上面发现了不错的字体1.1 我们打开控制台然后在网络中过滤woff，就找到了字体文件 1.2 在网上找到字体转svg的网站 TTF转SVG - 在线转换图像文件 （我用ttf转svg不理想，用woff2文件转）可以下载文件也可以直接复制链接使用链接的方式 然后将转化后的文件下载下来2.生产字体打开这个网站 IcoMoon App - Icon Font, SVG, PDF & PNG Generato
uniapp使用安卓系统的字体
qq_42877655的博客
10-13 1885
解决方法 解决方法是这个帖子里面原方的评论哪里得到的 解决办法 在uni.scss里面写个全局样式 view{ font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; } 扩展（这个是原理） 最标准的系统字体规范font-family ...
uni-app uni.request接口封装
01-08
uni-app uni.request接口封装 今天在做uni-app项目时，发现在uni-app中 调取后台接口需要大量的重复编辑，就在想能不能封装一个如同Vue项目中的this.$axios.get(url,data).then();格式，这样就减少了很多代码重复！...
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
uni-app用sqlite数据库本地缓存
05-12
使用sqlite数据库本地缓存
【uniapp 安卓】uniapp发布安卓，字体跟随手机主题变化
AAAXiaoApple的博客
09-16 378
【uniapp 安卓】uniapp发布安卓，字体跟随手机主题变化
uniapp实现用户全局设置应用字体大小（适用于各端）
AKA多个A的博客
08-17 3849
vuex_fontsize: 9, //数值根据自己项目调整。
uniapp 控制全局文字大小（包括组件中的文字）
weixin_48393490的博客
06-20 441
在项目根目录创建postcss.config.js文件，两种方法都需要在根目录下创建此文件。3.在项目中用vuex的可以在数据源中加上，没有的直接在本地存储。1、在根目录下创建utils文件夹并创建fongbase.js。4、在App.vue文件中读取缓存的文字大小值。2、创建改变文字的.vue页面。4、在需要改变字体的页面上加以下代码。在需要改变字体的页面上加以下代码。2、创建修改文字的.vue页面。
uniapp加载本地字体包思源黑体，并解决字体包太大报错问题
weixin_43773218的博客
02-27 1342
当字体包文件太大，比如我这思源黑体达到了7M，甚至十几M，便会报错RangeError: Maximum call stack size exceeded
记录：uniapp引入自定义字体，
qq_15064263的博客
02-22 1645
本地引入 <style lang="scss" scoped> @font-face { font-family: facon; font-weight: normal; font-style: normal; src: url('~@/stylesheet/Facon.ttf') format('truetype'); } </style> 官方文档 https://uniapp.dcloud.io/api/ui/font?id=loadf.
【自用】uni-app中使用自定义字体
qq_34378032的博客
01-11 7304
步骤一：拿到自定义字体包 ​ 首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。 步骤二：判断字体包是否需要转换 ​ 由于小程序不支持在 css 中使用本地字体文件，需以base64方式方可使用。而字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式，但大于等于 40kb，需人工手动转换。字体转换网站 步骤三：字体引入 将导出的字体文件中的 *.ttf 文件放入项目 static 文件夹中，并在 App.vue st
uniapp使用第三方文字，本地文字
luweisixsix的博客
10-12 1137
uniapp使用本地字体图标两种方式。
uniapp笔记——使用字体包(.ttf)
weixin_44792197的博客
09-25 2954
一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。字体转换网站：https://www.giftofspeed.com/base64-encoder。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；先选择.ttf文件,白色方框里面就是base64格式的文件。在app.vue引入，全局可用。
uniapp 使用自定义字体
09-17
在 uni-app 中使用自定义字体需要在项目的配置文件中进行配置。可以在项目根目录下的 `manifest.json` 文件中添加以下配置来引入自定义字体文件。 ``` "feature": { "fonts": { "files": [ "static/fonts/my-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值