微信小程序中引入ttf字体

本文介绍了解决微信小程序中ttf字体引入不生效的问题,通过将ttf字体转换为base64编码,并在static文件夹下的css文件中使用@font-face规则进行引用。

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

微信小程序中引入ttf字体

解决常规引入ttf不生效问题
第一步:将ttf字体转为base64(转码网址:https://transfonter.org
第二步:在static文件夹下新增font文件夹,并添加一个后缀为css的文件
第三部:在css中添加如下代码(此处可直接将你在转码网站下载下来的css文件放在此处)

@font-face {
  font-family:'ds-digital';
  src: url('此处为你转好的base64编码') format('truetype');
  font-weight: normal;
  font-style: normal;
}
### 如何在微信小程序中添加和使用自定义字体 #### 添加自定义字体的方法 为了使微信小程序能够支持特定的字体样式,在应用启动时通过`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、付费专栏及课程。

余额充值