如何解決在360瀏覽器下部分字體font-spider後有空格或字體鋸齒問題（僅對於外部字體）

問題：

 

有一天項目上線前，給產品經理演示，卻上演了很尷尬的一幕，我沒有測試360瀏覽器的兼容等狀況，而認爲webkit內核就是一致的，有關鋸齒的問題，彷佛樣式沒法解決，而後仍是百度找了下360下鋸齒的解決方案：開啓實驗室的高清字體渲染功能，問題順利的解決了（距離的問題也沒了，瞬間矇蔽）

這樣的解決方案只是我的體驗上的問題，可是產品是給客戶用的，不能採用這種方式，而後一直不停的尋找解決方案。偶然的機會接觸到了FontCreator，能夠製做和編輯字體的軟件。

這個軟件順利瞭解決360瀏覽器下間距和鋸齒的問題，且不用開高清渲染。如下是個人方案步驟：

1.　　打開FontCreator 9專業版，而後打開字體文件（文件->打開），這裏演示採用了一個ttf格式的字體

 

2.　　確認成功打開字體，接下來選擇菜單上的 [字體]->[屬性]，在打開的字體屬性選項卡中選擇特性面板，而後在特性面板中的間距下拉框中選擇 02 選項，而後點擊肯定。

3.　　最後準備導出字體，[文件]->[輸出設置]，在彈出的輸出設置對話框中，選擇web 字體，在輪廓格式下拉框中選擇cff（這點很重要！！！），而後點擊[文件]->[輸出字體f]->[輸出web字體]，選擇保存的目錄。

 

5.　　字體導出完成，咱們把css中字體的src url位置設置導出字體的位置，而後打開chrome和360瀏覽器測試

問題竟然解決了！

以上方案不保證對所有字體有效

（通過測試依然有點機器360瀏覽器不識別cff輪廓字體，怪洗腦的不明緣由）

 

方案2  -在線轉換工具

https://transfonter.org/ 很實用的字體在線轉換和生成樣式表工具

 

轉換後的字體解決了空格的問題，可是360下鋸齒或chrome小字體鋸齒問題依然沒有解決

另一個樣式粗糙的解決方案，不一樣瀏覽器可能不同

-webkit-text-stroke　　- css文字描邊

backface-visibility        - 這個能解決web中很多網頁中渲染的問題，不知道如何描述**

暫時拿着大鋸齒，沒有空格但終於能去交差了╰(*°▽°*)╯