前陣子發現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
