【開發課堂】支付寶小程式裡如何使用自定義字型？

在小程式中為確定移動終端的通用性，官方是建議首選 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