Google網頁字體在Chrome瀏覽器中看起來不穩定 - 如何應用此修復程序

這是一個普遍問題，似乎有解決方案。問題在於網頁字體在鍍鉻中顯示波濤洶涌。解決方案應該是在.woff調用之前移動.svg調用。這裏解釋：http://www.fontspring.com/blog/smoother-web-font-rendering-chrome這裏：http://www.adtrak.co.uk/blog/font-face-chrome-rendering/Google網頁字體在Chrome瀏覽器中看起來不穩定 - 如何應用此修復程序

問題是，我使用谷歌網頁字體，並導入這樣的字體：

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

，我不知道，也不能找出來，如何用@font-face css標籤代替上面的代碼導入它。我試過了，但因爲google只提供ttf中的字體而不是svg或woff，所以停滯不前。

希望你能幫上忙。

來源

2013-04-16 Farsen

如果您想應用此修補程序，則必須自己託管字體。

您的Google Fonts鏈接是樣式表的請求，它根據您提供的參數以及瀏覽器檢測動態構建。對於示例鏈接：

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

如果你確實提出這項要求自己使用curl：

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic

這是被送回：

@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 400; 
    src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 700; 
    src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); 
}

做最簡單的事情是返回Google Web Fonts，通過去here並單擊下載箭頭來下載有問題的字體。

然後你可以使用suggested fix from here，引用您下載的字體文件：

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
}

來源

2013-05-16 21:38:50

非常感謝您的回答！我已經擺弄了一段時間了，而且「差不多」讓它起作用了。問題是，使用新的自託管字體方法，所有瀏覽器似乎都呈現與原始谷歌樣式表請求鏈接不同的字體。 Firefox和IE使它變得更大，更胖/粗體，並且Chrome似乎使它更好一些，但也不太正確。請參考下面的示例圖片。！http：//www.gadaffi.dk/example.jpg 任何想法？：/ – Farsen

正如我所提到的，Google webfonts使用瀏覽器進行檢測，因此它會發送稍微不同的內容，並根據提出請求的用戶的瀏覽器進行定製。這沒有完美的解決方案。我的建議是通常停止瞄準像素完美匹配跨瀏覽器 - 它不應該這樣工作。 –

好像是因爲這是一個Windows/Chrome問題，他們可以用瀏覽器修復DirectWrite問題，或者如上所述修復字體谷歌apis上的svg順序。無論哪種方式，我看起來像通過Windows 8 +鉻木材削片機。 – Mark

你做的所有樣式的正確復位？

您的不一致的呈現體驗可能是由瀏覽器默認值引起的。

reset.css將所有元素設置爲默認值，這樣可以減少跨瀏覽器的不一致性。 reset.css有很多例子，其中最受歡迎的是meyerweb reset css。減少不一致的另一種方法是使用normalize.css。

簡而言之，這兩種方法之間的區別在於，reset.css只是重置所有瀏覽器特定的樣式，而normalize.css通過創建跨瀏覽器默認值具有更大的範圍。

這兩者之間的差異由normalize.css的開發者解釋爲here。

如果所有這些鏈接無法確保您始終正確設置字體權重，則會導入所有必需的字體權重。

你可以閱讀這裏的字體粗細：http://css-tricks.com/watch-your-font-weight/ 你也應該在使用normalize.ccs，因爲它不會重置字體重量rest.css不應用此技術。

來源

2013-08-01 21:22:03 itconlor

-1

將此添加到您的樣式表中的每個元素。

opacity: .99;

例如 -

p, li { 
    opacity: .99; 
}

我不知道爲什麼這個工作，但它沒有。

來源

2014-01-02 18:42:30 Kathy

Google網頁字體在Chrome瀏覽器中看起來不穩定 - 如何應用此修復程序

回答

相關問題