微信小程序添加外部字体方法

最新推荐文章于 2025-07-14 16:05:13 发布

转载最新推荐文章于 2025-07-14 16:05:13 发布 · 4.5k 阅读

文章标签：

#字体

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种解决微信小程序中@font-face使用问题的方法，通过将外部字体文件转换为Base64编码并直接嵌入WXSS中，实现了特殊或少数民族字体的支持。

部署运行你感兴趣的模型镜像

外部字体怎么添加?
我wxss里添加了 @font-face 代码，一般来说应该支持的，但还是不支持。如下：
[mw_shl_code=css,true]

@font-face {
font-family: '字体名称';
src: url("../../resources/font/UKIJTuzTom.eot");
font-weight: normal;
font-style: normal;
}
[/mw_shl_code]

暂时没有想到其他好的方式，就先用如下方式解决了
微信小程序 @font-face 里添加url地址没用，所以 URL地址替换掉 base64 编吗实现。
1. 先外部字体准备好。比：（UKIJTzTr.ttf 维吾尔语UKIJ字体）

2. http://transfonter.org/ 网站里上传字体，选择base64 编吗，fotmat后下载。

3. 下载包里有个 style文件打开后代码可以添加到WXSS里。

小白是少数minzu，不一定是最好的方式，如果有更好的方式也可以发帖回复，大家学习学习，谢谢了我是mehrxaD

用这个办法可以实现其他minzu语言或者外部字体添加到小程序里。（火星字体也可以）

注意： WXSS里添加 font-family: 'UKIJTuz'; 然后显示你更改的字体效果