微信小程序引用外部字体

最新推荐文章于 2025-03-05 10:41:03 发布
最新推荐文章于 2025-03-05 10:41:03 发布
阅读量2.8w 收藏 4
点赞数 4
分类专栏： 微信小程序 文章标签： 微信小程序 外部字体 阿里巴巴字体库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ALSNEI/article/details/54411945
版权
本文介绍了微信小程序中如何引入并使用外部字体，主要通过阿里巴巴字体库进行操作。步骤包括在阿里字体库选择字体并下载，复制iconfont.css内容到小程序样式文件，以及使用项目的unicode代码替换原有内容。

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

微信小程序如何引入外部字体库

微信小程序的霸权主义, 不识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, 这里主要用得就是在线的字体库. 它的使用不像之前引用阿里巴巴字体库那样简单, 有一点不同.

步骤如下:

1.在 阿里巴巴字体库 选购喜欢的字体并下载压缩文件, 详细方法这里不赘述, 不懂的请看 阿里巴巴字体库使用方法
2.Copy iconfont.css文件的内容, 可以选择放在全局的 app.wxss 或者 任何你要用到字体的 .wxss文件
@font-face {
   font-family: "iconfont";
  src: url('iconfont.eot?t=1484311526877'); /* IE9*/
  src: url('iconfont.eot?t=1484311526877#iefix')
最低0.47元/天 解锁文章
微信小程序 - 详细引入并使用第三方字体（使用网络字体艺术字）引入外部字体详细教程，微信小程序项目加载第三方在线或本地字体文件流程，小程序中如何加载使用第三方字体！
王佳斌
10-11 4273
微信小程序，加载第三方字体，小程序引入使用网络字体，微信小程序 详细引入并使用第三方字体（使用网络字体艺术字）微信小程序使用网络字体，小程序中如何加载使用第三方字体，小程序引用网络字体在安卓无效，小程序动态加载网络字体，微信小程序中使用自定义字体的实现与体验优化，微信小程序使用其他字体，微信小程序使用网络字体、阿里云OSS网络字体，如何在微信小程序内使用外部字体，小程序想使用第三方的字体?怎么引入才能生效，引入新字体并解决字体加载缓慢问题，小程序引用字体文件加载很慢怎么办，小程序开发API之动态加载网络字体
微信小程序 - 使用第三方字体
MfddMobile的博客
09-17 3892
将下载好的字体文件解压，并将字体文件以.ttf或.otf格式保存在小程序项目的合适位置，比如放在项目的根目录下的"fonts"文件夹中。在开发过程中，我们可以根据需要，多次使用步骤四和步骤五来应用不同的字体样式。将上述代码中的"MyFont"替换为你想要的字体名称，并根据字体文件的保存位置修改url中的路径。在需要使用自定义字体的页面的.wxml文件中，使用上述定义的选择器，并编写相应的文字内容。在需要使用自定义字体的页面的.wxss文件中，引用已经在app.wxss中定义的字体。步骤一：选择字体文件。
小程序使用阿里巴巴图标iconfont
fairyier
06-26 5563
小程序开发图标使用微信小程序开发，如果想使用像web端那样的字体图标，也是可以的，但是也只是支持Unicode，不支持彩色图标，在网上也查了很多，其实也有很多都相似，这里大概也就三种方法可以供参考，base64位这个我并不知道是什么，但是好像只需要转换下就可以了，也还是很简单的，下载好所需的文件，例如iconfont的字体图标下载好的代码里面的代码格式如下3.在这个平台https://transf...
小程序中如何引用图片库iconfont
最新发布
克里斯蒂亚诺更新的博客
03-05 150
如果有新的图标，将图标再次放入我的项目中，并重新下载后重新放入文件夹中，即可，重复之前的操作。重点文件：iconfont.css和iconfont.ttf ,剩余都是demo的参考。
如何在微信小程序内使用外部字体
web全栈开发的博客
05-28 826
通过 font-face 使用外部字体 首先通过 css 引入地址，然后在需要使用该字体时使用定义的 font-family 即可。 @font-face { font-family: "kaiti"; src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf"); } .test { font-family: "kaiti"; } 这里的 url 要用 CDN.
【微信小程序】如何引入外部字体样式
滕益宏的博客
08-13 2157
我引入的字体是 ionicons 字体  Download Zip后打开fonts文件夹，将对应字体的 ttf文件 上传至 https://transfonter.org/  注意一定要选中 Base64 encode 的TTF格式，Convert 后下载转换后的压缩包，并将其中的 transfonter.org-20180404-162638/stylesheet.css 中的代码复制粘贴到 需...
小程序引入中文字体
吾娱生活的专栏
07-21 3955
做小程序的时候，有时候会遇到，设计的UI中出现了特殊的字体，而单独的导入一个中文字体库是很大的，而且容易经常加载失败。 这个时候我们可以想办法将字库中用到的字单独提取出来，这样就会减少体积，保证使用了。 具体步骤如下： 1）在线提取字体https://www.fontke.com/tool/subfont/ 比如上图，我的小程序只需要7个字，单独提取出来只有几K 2）再到这个网站https://transfonter.org/转成base64只有十几k 3）在小程序中引入使用即可
html5 css3简单小程序,微信小程序使用CSS3字体
weixin_32591379的博客
06-09 196
@font-face是CSS3中的一个模块，它主要是把自己定义的Web字体嵌入到的网页中。@font-face的语法规则：@font-face {font-family: ;src: [][, []]*;[font-weight: ];[font-style: ];}IconFont(图标字体)是用字体来代替图标、图片文件的方法，通过IconFont可以对图标的大小、颜色等进行控制。微信小程序的...
在微信小程序使用外部字体
挚友阳光的博客
01-10 3721
小程序引用外包字体包！
微信小程序 苹果手机可以正常引用字体，安卓手机无法正常引用，需在nginx配置字体跨域
hanzhuhuaa的博客
11-11 296
【代码】微信小程序 苹果手机可以正常引用字体，安卓手机无法正常引用，需在nginx配置字体跨域。
用于在桌面显示自定义的空心文字的小程序
01-21
记得刚接触电脑时,采用UCDOS制作了几个空心字,用作一个软件的启动界面,得到了老师的表扬,心里很是高兴.近来忙里偷闲,自己写了个小软件,在桌面上显示自定义的空心文字.因此我们可以把自己的座右铭或最喜欢的话显示在桌面上比较显眼的位置.字体大小和字体名称都可以在配置文件里配置.
微信小程序使用特殊字体包
weixin_40362806的博客
08-02 1398
微信小程序使用特殊字体包
微信小程序开发自定义字体样式（维吾尔语字体)
IT13333的博客
05-22 6605
首先在utils文件夹里面创建font文件夹 然后 font文件夹里面创建font.wxss文件。然后app.wxss全局css样式引入字体样式就可以。font.wxss文件夹里面加入这些代码。
微信小程序自定义字体样式、字体修改、第三方字体设置
热门推荐
u014388322的专栏
09-01 1万+
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
微信小程序引入自定义字体
donghua201的博客
10-17 1428
1、在style文件夹下新建font.wxss文件，使用@font-face声明字体。字体这类庞大的资源需要放在服务器上，然后从服务器上选取所用的引用地址。在微信小程序上线时，要求整个小程序所有分包大小不超过。2、 在入口文件app.wxss中全局引入字体文件。3、在业务文件的wxss文件中使用字体。（主包 + 所有分包，
微信小程序导入外部字体的详细流程
qq_56579776的博客
01-12 3698
同时，根据实际需求和性能考虑，合理选择使用自定义字体或系统默认字体，以达到最佳的用户体验效果。对于微信小程序开发者而言，如何在小程序中导入外部字体，让品牌信息在小程序中完美呈现，是一个值得探讨的问题。在资源管理页面中，找到“上传资源”选项，并选择“字体”分类。在微信小程序页面中，您可以使用自定义字体样式来应用导入的外部字体。在小程序的js文件中，使用wx.getFontList API获取自定义字体的类名，并在页面中引用该类名。在wxml文件中，通过引用自定义字体的类名，即可将外部字体应用到页面元素上。
小程序使用自定义字体
qq_49012497的博客
08-06 683
如果你在小程序中要用这个字体包时，你要改变的文字，必须是在demo中出现的文字，不然的话，在小程序中是没有变化的，所以，你想改变，就只能先在demo.html把你需要的文字加进去压缩。这个是字体转base64格式的网址：https://transfonter.org/安装语句 npm install font-spider -g。下载后会得到一个压缩包，解压完会得到这样的文件夹。按照下面步骤，把之前字体压缩包，按照流程走一遍。我截了个图说明一下，大家可以看看。
微信小程序怎么引入字体
02-10
### 如何在微信小程序中添加和使用自定义字体 #### 添加自定义字体的方法 为了使微信小程序能够支持特定的字体样式，在应用启动时通过`onLaunch()`函数调用设置字体方法是一个常见做法[^2]。具体来说，可以通过`wx.loadFontFace`接口动态加载网络上的字体资源并将其应用于整个项目或指定的选择器。 对于想要使用的每一种新字体，都需要创建相应的配置对象传递给`loadFontFace`函数。此配置应包含是否全局生效(`global`)、期望注册的名字(`family`)以及指向该字体文件的位置(`source`)三个主要属性。一旦完成这些设定，则可以在后续的小程序页面内利用CSS声明的方式引用已加载过的字体名称作为`font-family`值的一部分来改变文字外观。 下面是一段用于初始化两个不同风格字体的例子： ```javascript function setFont() { const Fredoka_url = 'https://example.com/path/to/FredokaOne-Regular.ttf'; const PingFang_url = 'https://wechat/static/font/苹方字体.ttf'; wx.loadFontFace({ global: true, family: 'Fredoka One', source: `url(${Fredoka_url}) format('truetype')`, success(res) {console.log('Fredoka One 加载成功');}, fail(err){console.error('Fredoka One 加载失败', err);} }); wx.loadFontFace({ global: true, family: 'PingFang HK', source: `url(${PingFang_url}) format('truetype')`, success(res) {console.log('PingFang HK 加载成功');}, fail(err){console.error('PingFang HK 加载失败', err);} }); } ``` 值得注意的是，由于字体文件通常体积较大，建议提前上传至可靠的CDN服务上，并确保链接稳定可靠以便于快速下载。 另外，在项目的根目录下的`app.wxss`文件里也可以直接导入外部样式表以简化某些情况下对字体样式的管理[^3]。例如： ```css @import './style/iconfont.wxss'; page{ font-size:15px; /* 使用之前定义好的字体 */ font-family:'PingFang HK','Fredoka One', sans-serif; } ``` 这样做的好处是可以集中管理和维护所有的公共样式规则，同时也方便了团队协作中的资源共享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值