微信小程式中引入外部字型
阿新 • • 發佈:2018-12-25
問題:在小程式中是不能直接引入字型檔案的
解決方式一:將檔案轉化成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>
解決方式二:使用阿里字型的線上地址
但是我嘗試未成功,不知道啥原因