@字體面的字體Safari和Chrome

顯示模糊在Mac上我使用我的網站標題和字幕兩個特殊字體。他們在IE，Firefox和Chrome上的PC上運行良好。但是，在Safari和Chrome的Mac上，字體會顯得底氣和略顯模糊。我使用的特定字體是Utopia和Helvetica Neue Condensed Bold。我使用基於otf文件的字體松鼠生成字體工具包。我正在使用字體松鼠生成的CSS。你可以看到網站http://shapecast.benmango.co.uk。我也有在截圖中比較適用於Mac的瀏覽器不同的結果和PC： enter image description here @字體面的字體Safari和Chrome

的代碼我使用的CSS是：

@font-face { 
    font-family: 'Utopia'; 
    src: url('/fonts/utopiastd-regular-webfont.eot'); 
    src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/fonts/utopiastd-regular-webfont.woff') format('woff'), 
     url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'), 
     url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
    font-variant:normal; 
} 

@font-face { 
    font-family: 'HelveticaNeueLTStdCnBold'; 
    src: url('/fonts/helveticaneueltstd-bdcn-fs.eot'); 
    } 

@font-face { 
    font-family: 'HelveticaNeueLTStdCnBold'; 
    src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'), 
     url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
    font-variant:normal; 
}

我一直在這個問題上一個現在幾天，似乎沒有任何地方。當我將Helvetica Neue粗體字體的字體重量從普通字體改爲粗體時，我確實得到了改進。我也嘗試將SVG行移動到頂端，但這沒有幫助。

奇怪的是，在Chrome瀏覽器Mac上，當三個主要的面板之一的上空盤旋（主標題下），字體變得更清晰，它看起來它應該。它在Safari上沒有任何區別。

我將不勝感激，如果有人可以提供任何意見。

來源

2012-07-31 Ben

所有的瀏覽器渲染方式不同的字體。嘗試-webkit-font-smoothing: antialiased;的Safari，看看它是否有所作爲。另外，請嘗試使用相對長度單位。

來源

2012-07-31 18:19:01 Kwon

喜權，非常感謝你的回覆。該代碼適用於Safari。不幸的是Chrome並沒有改變。我將繼續查看是否可以找到Chrome的修復程序。再次感謝。 – Ben 2012-08-02 15:48:48

嗨Kwon，我錯了，它在Chrome中工作。但是，它不適用於Mac上的Firefox。你有什麼建議嗎？ – Ben 2012-08-03 07:41:28

首先，確保您使用重置樣式表，如果您還沒有。然後，嘗試設置'font-weight'專門（無論你設置爲什麼）。如果黑客無法解決，不要過分強調它。我相信Firefox Mac用戶不到3％，而你想爲大多數人設計。 – Kwon 2012-08-03 17:32:41

正如權說，以往瀏覽器/操作系統有不同的字體渲染。它甚至取決於您在OS級別的顯示設置設置爲（子像素別名）。

更令人沮喪的，WebKit的/鍍鉻有一些字體面顯示bug以及，如用文字陰影任何文本：http://code.google.com/p/chromium/issues/detail?id=23440

來源

2012-07-31 18:30:11 kmiyashiro

嗨，吉代，感謝您的回覆。它看起來像自定義字體是一個雷區，並不真正簡單。 – Ben 2012-08-02 15:51:31

嘗試，如果字體鉻模糊。

 
body {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;} 

or 

a,p,span,h1,h2,h3,h4,h5 {-webkit-text-stroke: 0px!important;-webkit-font-smoothing: antialiased !important;}

來源

2014-05-31 05:15:49

當HTML容器與HTML內容標記相比尺寸不一致時，可能會出現模糊效果。要解決它，請嘗試修復頭容器的大小，並確保它比兒童大。

來源

2017-10-13 15:34:20 DevMultiTech

@字體面的字體Safari和Chrome

回答

相關問題