1. 【uniapp實戰筆記】微信小程序設置字體的開發踩坑記錄
在微信小程序中開發uni-app時，我遇到了幾個有關字體設置的問題，這里記錄了開發中的踩坑記錄。在使用canvas渲染文字時，必須設置文字的字體大小為整數。此外，微信小程序對於文字字體集的兼容性較差。在iOS端，能成功設置的字體只有三種：'Arial', 'Courier New', 'Georgia'。而在Android端，只有'serif'和'nato'兩種字體在canvas中生效，但在DOM中直接設置這兩種字體沒有任何變化。對於舊型號的Android手機，僅對英文有影響。有兩條解決路徑：重寫H5頁面使用webview嵌入小程序，或繼續兼容操作。博主選擇了後者，IOS端無需考慮，系統基本兼容前三種字體。對於Android端，嘗試使用uni.loadFontFace引入'serif'和'nato'，但效果不佳。最終，將.ttf字體文件轉為base64引入，僅保留英文後兩種字體，整個包大小增加了60KB。在CSS文件中，通過系統判斷引入base64處理後的字體。不同平台對字體的兼容性存在差異，最完美的方法可能是使用webview。若需對中文兼容，引入相應的中文字體集，但會導致包體積過大。可嘗試動態抽取需要的文字，只引入所需字體，後續可能有更詳細的方法分享。下期將繼續分享uni-app實戰中的經驗，敬請期待。歡迎關注、留言，您的支持是我的動力。