在小程序中为确保移动终端的通用性,官方是建议首选 PingFang SC 作为中文字体,以兼顾 Web 版和 Mobile 端。
设计中字体大小与使用场景规范如下:
在通配样式里字体如下:
* {
font-style: normal;
font-weight: normal;
font: 0.3rem/1.5 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
那如果我们需要一些特殊的字体展示怎么办?
@font-face
在app.acss中加入如下代码:
@font-face {
font-family: "My Font";
src: url("/fonts/myfont.woff2") format("woff2"),
url("/fonts/myfont.woff") format("woff");
url("https://mdn.mozillademos.org/files/2468/myfont.ttf") format("opentype");
}
字体文件可以放在项目中也可以使用在线的,不建议放在项目中,因为可能会造成文件过大打包失败,定义完之后就可以在你想使用这个字体的样式里加入这个字体了。
page { font-family: "My Font"}
支付宝小程序官网:https://mini.open.alipay.com