Google font 在chrome 顯示的問題

日期:2014/05/16  分類:web   標籤: , ,

quicksand
前陣子發現google font的Quicksand還蠻合我胃口的
於是就把它拿來套現在這個網站的英文字型
我大部分時間是使用mac
有一天我用windows的chrome打開我的網站
傻眼…英文字體都變得”殘破不勘”
比較小的字甚至根本看不清楚

於是,我就開始了debug之路
經過一番google後
我發現原來這是只有windows的chrome才會有這個問題
(難怪我之前都沒發現,因為mac上的chrome/safari是OK的)
而且google也知道這個問題,只是好久了都沒去解決
後來我試了很多種方法(可以goo到一堆方法,可是都沒用XD)
最後只有一種有用,但是條件就是你要自己host你的字體
方法如下

1.先去把你的字體轉成SVG,並傳到你自己的網站上
可以把你的字體丟到這個網站轉檔成svg
http://www.fontsquirrel.com/tools/webfont-generator
轉檔前可以先搜尋一下,上面字形很多,搞不好有人轉過了
要注意的是記得用免費的字形,避免侵權問題

2.修改你的css,增加下面這一段

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
     font-family: 'quicksand';
     src: url('/font/quicksand-regular-webfont.svg') format('svg');
   }
}

url的部分就是你的svg檔的位置,檔名當然要改成你自己的svg檔名
這個方式很蠢
啊我就要用雲端的字形,現在又自己host
那何必用google font…
可是目前也只有這個方法
不然就是不要用windows XD

Last Modified: 2014/8/21 15:46

留言

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料