微信小程序：引入自定义字体

已于 2023-06-16 17:49:33 修改
阅读量2.7k 收藏 4
点赞数
分类专栏： 微信小程序实战全记录 文章标签： 微信小程序 引入外部字体 小程序
于 2019-12-30 18:38:05 首次发布
本文为博主原创文章，未经博主允许不得镜像、转载。
本文链接：https://blog.csdn.net/qq_21041889/article/details/103770961
版权
本文介绍了如何在微信小程序中引入外部字体，通过在线工具进行字体子集生成和转换为base64，以减小文件大小。并补充了2023年的更新，指出在安卓设备上可能存在的问题及解决思路，涉及到同源策略和CORS配置。
摘要由CSDN通过智能技术生成

微信小程序引入外部字体

看了网上很多文章后发现可以把字体上传到Online @font-face generator — Transfonter转成base64后下载下来， 引入对应css后发现太大啦，

然后在网上搜罗了一番，发现了一个神奇的网站可以在线提取字体在线字体提取工具,字体子集生成器 - 在线工具 - 字客网

（此方法仅适用于已知会用到的字）

然后再到这个网站Online @font-face generator — Transfonter转成base64只有十几k。

==

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Dove言和
关注
专栏目录
订阅专栏
微信小程序css篇----字体(Font)
qq_39702981的博客
11-21 1万+
一.字体：font。属性在一个声明中设置所有字体属性。 可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family". font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话. 1.font-style：文字样式。 取值：norm...
微信小程序引入字体
半梅芒果干的博客
01-04 2435
动态加载网络字体（推荐使用） 动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式文件地址 小程序文档参考链接：https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html // 我是在app.js中调用 wx.loadFontFace({ family: 'HYQH-50S', source: 'url("https://www.xxx.com/font/HYQH-50S.
微信小程序字体图标
最新发布
赵玉的专栏
08-12 420
字体图标是一种在网页和应用程序中广泛使用的图形表示方法，它们以字体的形式存在，可以通过CSS样式来调用和显示。在微信小程序中，字体图标同样扮演着重要的角色，它们可以用于导航、按钮、图标列表等多种场景，以提高用户体验和界面的美观性。字体图标的具体显示由class中定义的伪元素（如:before或:after）的content属性控制，该属性通常设置为图标对应的Unicode编码。综上所述，字体图标在微信小程序中是一种非常实用的设计元素，通过合理的使用和管理，可以提升小程序的用户体验和美观性。
微信小程序如何引入外部字体包
少油少盐不要辣
08-18 2936
小程序
微信小程序 引入第三方字体
weixin_30407099的博客
07-19 1344
1、新建一个font.js 2、将需要引入的字体上传到云上，必须是https。 3、在font.js中使用微信提供的api下载字体，wx.loadFontFace({}) // 加载字体 loadFont() { //英文 wx.loadFontFace({ family: 'xxxx', //设置一个font-family使用的名字...
微信小程序导入外部字体的详细流程
qq_56579776的博客
01-12 2720
同时，根据实际需求和性能考虑，合理选择使用自定义字体或系统默认字体，以达到最佳的用户体验效果。对于微信小程序开发者而言，如何在小程序中导入外部字体，让品牌信息在小程序中完美呈现，是一个值得探讨的问题。在资源管理页面中，找到“上传资源”选项，并选择“字体”分类。在微信小程序页面中，您可以使用自定义字体样式来应用导入的外部字体。在小程序的js文件中，使用wx.getFontList API获取自定义字体的类名，并在页面中引用该类名。在wxml文件中，通过引用自定义字体的类名，即可将外部字体应用到页面元素上。
【教程】微信小程序导入外部字体详细流程
WHY的博客
09-18 4662
本文介绍了如何在微信小程序中导入外部字体，包括字体导入API的使用以及字体资源在服务器上的部署和访问等内容
【微信小程序】使用自定义字体
要加油
09-02 7354
微信小程序使用自定义字体 文章目录微信小程序使用自定义字体1. 微信小程序默认支持的字体2. 自定义字体获取3. 文字提取和字体ttf文件压缩4. 字体ttf文件转Base64格式 1. 微信小程序默认支持的字体 在小程序的.wxss 中对字体进行样式定义，如 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, ans-serif ; 显示效果如下图： 但是由于微信支持的字体非常有限，不能满足个性化的需求，因此在开发的过程中可能会需要使用自定义字体。 小程
微信小程序设置字体无效_微信小程序自定义字体及自定义图标问题说明
weixin_39980575的博客
12-22 2168
自定义图标及自定义字体，一直是很多小程序开发者的心病，其实本站是很多解决方案的，为了集中起来，方便直接跳过此坑，我特别做了这次针对字体及字体图标的跳坑；相关讨论：Q：小程序开发时能否使用我们自定义的字体图标。A：自定义字体是支持的，但是需要使用线上字体，并且存放字体的服务器需要允许跨域。相关讨论一：字体文件无法加载，确认文件是存在的@font-face {font-family: 'Glyphic...
微信小程序中使用自定义图标（阿里icon）的方法
10-18
在微信小程序的样式文件中，可以通过@font-face规则来定义一个自定义字体。这是使用自定义字体的先决条件，需要指定字体的名称以及字体文件的来源。在提供的内容中，@font-face的规则已经给出，其中指定了字体名称...
微信小程序--字体展示
热门推荐
include的博客
08-03 3万+
字体一 font-family:‘Courier New’, Courier, monospace; 字体二 font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif; 字体三 font-family:‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, ...
微信小程序font-family中提供的十四种字体
qq_37182915的博客
07-28 2万+
微信小程序font-family中提供的十四种字体 链接：https://blog.csdn.net/include_IT_dog/article/details/98382276
小程序引入字体图标
wangjuhi的博客
05-17 2576
1，书接上文，小程序商城，难免需要一些（个人中心，购物车）之类的图标，但需求不是很多，开始准备直接放图片，但后来考虑到小程序审核大小的限制 当然，图片放服务器，直接使用链接也是可以的 2.我一般都使用阿里巴巴矢量图标库 链接：https://www.iconfont.cn/ 选择自己想要的图标，加入‘购物车’ 点开购物车，点击下载代码 解压下载压缩包，找到iconfont.c...
微信小程序中使用特殊字体
辽辽无期的博客
03-04 1068
复制这样式放到你写的wxss文件中。使用下面这个网站进行字体转换。推荐几个常用下载字体的网站。
微信小程序中使用字体库_小程序使用自定义字体库
天马3798
09-16 3674
小程序前端默认不支持woff2/woff文件加载。但浏览器支持base64编码图片解析。@font-face 的 url使用服务器连接,不使用本地连接。使用服务器端的woff2/woff字体库，加载有延迟。将woff2/woff文件，上传到自己的服务器上；处理方案蒋woff2转码成base64编码即可。或者使用阿里iconfont的在线连接。
微信小程序引字体
weixin_44097578的博客
05-26 261
工作需要引入相关字体，查了一下文档，最终还是引入成功，记录下来帮助有需要的人 这里拿 Aldo-SemiBold 字体为例： 现在线上下载.ttf字体包: http://www.xiazaiziti.com/247425.html 下载成功后 进入字体转换网站： https://transfonter.org/ 第一步：上传字体 第二步：Base64 转换打开 第三步：开始转换 第四步：下载解压包 二、将下载好的压缩文件放到一个文件夹中 然后在项目中引用 最后用到文字中 结果： 效果图： 注：
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 2628
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序：自定义天气图标组件与布局实战
组件的样式部分在`index.scss`中定义，通过`@font-face`规则引入自定义字体，并为`.icon`类设置了通用的字体样式，确保图标在不同设备上显示清晰。`.icon::after`和`.icon::before`伪元素则可能用于添加额外的图标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dove言和

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值