1. 程式人生 > >微信小程式中引入外部字型

微信小程式中引入外部字型

問題:在小程式中是不能直接引入字型檔案的

解決方式一:將檔案轉化成base64再引入,親測有效

參考連結

3、下載得到檔案

4、開啟 stylesheet.css,複製全部內容

5、可將程式碼貼上到app.wxss檔案中,定義使用webfont的樣式

app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。如果頁面有自己的樣式表, 則會覆蓋公共樣式表

/**自定義外部字型樣式**/
@font-face {
    font-family: 'FZZhengHeiS-EL-GB';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAUAQAABABARkZUTWYwmBUAG7e0AAAAHEdERUYAKR4YABu2dAAAAB5HUE9TaJFuigAbt5QAAAAgR1NVQswQ5rUAG7aUAAAA/k9TLzJNKFaRAAAByAAAAFZjbWFwtVMFYQAAeJwAAHROY3Z0IAAVAAAAAO6cAAAAAmZwZ21l
......)format('truetype');
    font-weight: normal;
    font-style: normal;
}

.base-font{
    font-family:"FZZhengHeiS-EL-GB" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

6、為文字加上對應的樣式

<text class='base-font'>哈哈哈哈哈哈哈哈哈哈哈或</text>

解決方式二:使用阿里字型的線上地址

但是我嘗試未成功,不知道啥原因