項目中引入特殊字體【小程序、h5】包括canvas畫圖

請看清楚我虛線下面所有的話。
橫線上的廢話隨便你看不看。
說實話這個字體已經把我折騰的死去活來了一段時間,而且我們項目還經常要畫分享圖去刷朋友圈,默認字體沒辦法達到設計的那種效果,查了不少資料,也自己摸索了半天,最後終於找到了救星。
廢話不多說,其實並不難。
而且找到的這個有幫助的網站很多免費可以用的字體,如果沒有特殊需求可以不需要花錢。




小程序和h5的頁面展示特殊字體

有一個網站,叫有字庫

裏面隨便找到一個你滿意的文字,或者可以上傳你要的文字,不過有些字體會有版權問題不能用,你自己上傳特殊的上面沒有的字體也行。
emmmmmm……提醒一下,如果你要自己上傳字體的話,最好開個會員,然後加他們的官方號問一下,不然審覈時間…………有點久。
然後用css引入會比較方便,按步驟我們來走一遍。

我隨便找了一個

clipboard.png
這個字體不錯
就這個了
點了立即使用然後進入下一個頁面

clipboard.png

點左邊的這個css模式,會讓你輸入所有你需要的文字,不要有重複的哦~~~

clipboard.png

生成!

clipboard.png

不好意思打個碼,按照上面的方法走就是了。
這就是直接再頁面上顯示文字的辦法

這個在h5和小程序上面都可以使用的,非常方便。

接下來就是畫圖了。

h5的canvas畫圖引入特殊字體

當時也看了不少文章,直接把4m的字體放入項目也做過,放在服務器上然後css引入也試了,手機上看都沒啥用。
真是哭幹了我的黃河淚。
後來還是有字庫當了我的救星。
裏面免費的那些字體我感覺夠我用了【夠我用有個屁用我又不是設計】

接下來我們看方法
先丟出文檔

裏面的意思就是,你先引入它的js,然後使用getFontFace的方法,注意!!!!

注意!!!!

畫圖一定要在

clipboard.png

成功返回之後調用,然後字體使用result.FontFamily這個返回的字體名就可以了。

應該不需要代碼示範了吧。

小程序canvas畫圖引入特殊字體

啊這個,其實最開始的時候挺噁心的,因爲他引入特殊字體還偶爾會報錯,【怪小程序去】
現在好像問題不大,首先
首先!!!!把字體存到你的服務器上,隨便丟那裏都好,給個網絡地址就行。
注意一下,iOS 僅支持 https 格式文件地址,所以地址要https。

引入就是用小程序的引入字體方法啦。

clipboard.png

同樣還是跟之前一樣,canvas的畫圖需要在success的方法裏面進行,不然不能保證字體加載完成你就開始畫圖了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章