Chrome和IE中的QuickSand（Google字體）的字體渲染效果不佳

我一直在努力使用QuickSand Google字體在所有瀏覽器中獲得一致且漂亮的字體。 Chrome和IE顯示非常鋸齒狀和像素化邊緣，特別是在較小的字體尺寸下。放大瀏覽器通常會使工件消失。Chrome和IE中的QuickSand（Google字體）的字體渲染效果不佳

這裏是火狐，Chrome，& Internet Explorer中的問題的截圖對比： https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png

這裏是一個的jsfiddle復現實驗問題：

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active { 
color: white; 
display: inline-block; 
padding: 19px 10px; 
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif; 
text-transform: uppercase;}

來源

2013-05-05 Mark1270287

問題是由於谷歌字體沒有實現所有的字體文件類型。解決方案是使用字體松鼠Web字體生成器來生成丟失的文件類型並自己託管它們。

來源

2013-05-06 02:55:26 Mark1270287

嗨馬克，我有完全相同的問題 - 你介意分享你的解決方案和生成的文件嗎？謝謝！ – Nils 2014-02-18 13:37:33

花了半天的時間試圖找到解決辦法，直到我找到Mark的解決方案。只需轉到http://www.fontsquirrel.com/tools/webfont-generator並上傳您擁有的任何字體文件。下載webfontkit，在工具包中是stylesheet.css。您可以參考部分中的stylesheet.css。我在Safari中呈現字體時出現問題，但不是Chrome或IE，因此我最初無法找到此解決方案。感謝馬克發佈此。爲我挽救了一大堆悲傷。 – Francis 2016-01-25 16:48:11

你對瀏覽器上的字體渲染不能做太多。如果可以使它變得更好，您可以嘗試使用font-face，但否則不能更改。

對於WebKit的（瀏覽器，Safari瀏覽器），你可以添加：

-webkit-text-stroke: 1px black;

爲了掩蓋問題不大，但文字會變成股票。

來源

2013-05-05 17:42:03 drip

感謝您的幫助。我最終研究了Google Font加載的嵌入式字體表面代碼，結果發現它只能鏈接到.woff字體格式。它們的字體實現不包括支持所有瀏覽器的.eot，.ttf或.svg。我用字體松鼠生成丟失的文件，現在在Chrome和IE中看起來好多了。 – Mark1270287 2013-05-06 02:53:58

Chrome和IE中的QuickSand（Google字體）的字體渲染效果不佳

回答

相關問題