uniapp使用自定义字体

于 2024-09-13 10:40:42 发布
阅读量226 收藏
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71421744/article/details/142204166
版权

uni.loadFontFace()

动态加载字体。一般有2个应用场景：

  1. 使用css字体图标。字体图标相比图片的优势是：体积小、矢量不怕失真、支持点击变色。
  2. 使用自己的字体，而不是os提供的字体，来渲染整个界面的文字

文档：uni.loadFontFace(Object object) | uni-app官网

代码：

在app.vue里写

source：字体报路径，如果项目是小程序建议字体包扔到服务器上防止代码包过大

直接定义全局css

在需要用到该字体的地方就可以直接使用了

我就爱吃稀饭
关注
UNIAPP 怎么引入字体
陈小白
08-17 1万+
第一种 网络字体地址 const url = 'https://sungd.github.io/Pacifico.ttf' loadFontWeb() { uni.loadFontFace({ family: 'font-test', source: `url("${url}")` }) }, 第二种 本地字体地址 第...
loadFontFace 开发者工具和苹果手机可以 安卓手机不可以？
静如雪的博客
08-13 725
[已解决]利用云开发解决小程序加载自定义字体无效果问题 官方文档 文章是用的腾讯云 我写的阿里云 1.对象存储里找 2. 3.添加规则 4.上传字体文件，并设置公共读 5.获取url 6. loadFontFace() { wx.loadFontFace({ global:true, // 版本 2.10.0 后 全局app.js 使用 family: 'PingFangSCRegular', source: 'u..
uniapp加载第三方字体方案对比（附原生微信小程序方案）
最新发布
蓝枫秋千的踩坑记录
08-15 1418
中引入（或者新建一个css文件，然后app.vue种进行import也可以）用工具将ttf文字文件，转成base64形式，并通过css引入。这种用于原先的字体包就不大的（这种适用于用到的文字很少的情况。跨域问题，可以参见这篇文章。添加字体文件所在的服务器域名。我调用之后，根本没效果，就像正常字体一样使用即可。最后各种尝试，终于在。大概减少40-50%比如我压缩了2个字体。
uniapp加载第三方字体（微信小程序测试通过）
juceli的博客
05-26 2100
一。CSS远程加载 App.vue @font-face{ font-family: font-name; src:url('https://XXXXX/font.ttf'); } 在微信小程序的开发者工具里面有用，但是（安卓）真机调试没有用 二、使用API uni.loadFontFace() App.vue onload(){}中 uni.loadFontFace({ family: 'Bitstream Vera Serif Bold', source: 'ur
uniapp使用第三方字体
九亿宅男的梦的博客
07-29 6855
uniapp使用第三方字体
uniapp 中使用不同字体
热门推荐
唐僧的专栏
04-19 1万+
官方文档 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引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案
@微你
01-10 3894
uniapp 开发小程序时 怎么样使用第三方字体库（比如宋体、楷体等）呢
uniapp 使用自定义字体
09-17
要在 UniApp 中使用自定义字体，首先需要在项目中添加自定义字体文件。通常字体文件会以.ttf、.otf 或 .woff 格式提供。在项目的 static 目录下新建一个 fonts 文件夹，并将字体文件放入其中。 接下来，在项目的 ...
uniapp字体图标的使用
12-31
2. 如果使用的是自定义字体库，需要确保CSS文件已经引入，并在`<u-icon>`组件中指定`fontFamily`属性，例如： ```html <u-icon name="my-icon-name" size="30" color="#007aff" fontFamily="my-custom-font"></u-...
uniapp小程序自定义动态tabbar
04-08
自定义TabBar的样式可以通过修改`tabbar.vue`中的CSS来实现，可以调整字体大小、颜色、背景色、边框等。同时，uni-app支持使用scss、less等预处理器，可以更好地组织和复用样式。 7. 性能优化 为了提高用户体验，应...
uniapp 全局自定义字体
02-07
在 uni-app 中，你可以通过全局样式(global style)的方式设置自定义字体。首先，你需要将字体文件放入项目中，然后在 main.js 文件中引入该字体文件，最后在全局样式中设置 font-family 即可。 示例: 1. 将字体文件...
Android APP使用自定义字体实现方法
09-01
本文将详细讲解如何在Android APP中实现自定义字体的使用。 首先，Android系统自身提供了一些内置字体，如normal、sans、serif和monospace等，可以通过在XML布局文件中配置`android:textStyle`（normal、bold、...
解决uniapp微信小程序canvas不能引入字体的问题
zhoulib__的博客
07-25 4650
解决uniapp微信小程序canvas不能引入字体的问题
小程序字体文件跨域导致字体加载失败解决方案，特别是安卓
12-13 2750
如果使用css的加载方式，可能会无法定位字体失效bug出现的原因，但是loadFontFace有加载失败的接口，所以可以查看报错的原因，下面是css加载字体的方式，不推荐使用使用 loadFontFace 的api代码：在app.vue中的onLunch钩子函数里面使用。
uniapp使用加载本地文字包
qq_42721092的博客
06-03 427
但是通过Hbuilder云打包后，就运行不成功了出现了以下的错误。发现端倪后通过搜索给它换成。
小程序字体真机失效解决
Grace的博客
09-29 2555
1、使用 uni.loadFontFace。2、真机字体失效修改 nginx 配置。uniapp 微信小程序字体加载。
uniapp小程序字体真机失效解决方案
weixin_50587417的博客
04-19 3653
uniapp小程序字体真机失效解决方案 uni.loadFontFace
阿里巴巴图标，font-family字体样式
weixin_38797742的博客
04-11 845
PC端，小程序端的图标，字体样式的使用，及其衍生的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值