为啥我的不好使

来源:5-8 苹方字体设置

冻豆腐仔

2018-11-07

图片描述

写回答

3回答

negrochn

2018-12-24

windows电脑无法直接使用苹方字体,即使字体中安装苹方字体也无法直接在css中使用,需要从外部引入苹方字体,具体方法,我后续写一篇文章出来,先提供一个解决方案


将以下代码复制到app.wxss中,然后在index.wxss中的.container text的font-family: PingFang Light;

PS:我这边使用的是PingFang Light字体,而非PingFang Thin哈

@font-face {

    font-family: 'PingFang Light';

    src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');



3
0

negrochn

2018-12-25

写了一篇文章详细说明微信小程序如何设置苹方字体的,

指正一下之前回复的错误,windows中安装PingFang Light等字体,是可以直接在微信小程序的wxss中设置并生效的,

另外可以通过引入base64的字体的方式也是可以生效的


文章:《微信小程序设置苹方字体

0
1
我9730482
刚刚我的设置也生效不了,看了您的解答解决了,感谢您!
2022-10-22
共1条回复

7七月

2018-11-08

代码肯定写错了吧,检查下。

0
1
冻豆腐仔
字体我是看着您的一个字母一个字母打的,反复到了好几遍,我用的windows系统,会不会跟这个有关系
2018-11-09
共1条回复

纯正商业级微信小程序应用实战,全方位小程序特性讲解

真实数据的高质量小程序项目,学会直接工作

4782 学习 · 2125 问题

查看课程