在小程序中为确保移动终端的通用性，官方是建议首选 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