2015-03-03 94 views
19

我想我已經在移動版(iOS 8)Safari中發現了Google字體的網絡渲染錯誤。在我看來,Mobile Safari爲所有使用Google字體的文本或使用其他字體的文本添加了一小部分字母間距。我試用的Google字體(Open Sans)無關緊要。它在所有現代瀏覽器上正確渲染。經過測試的Android,FF,Chrome,Safari。爲什麼iOS Safari添加額外的字母間距?

嘗試在iOS設備上加載此頁面以查看我的意思。另請參閱代碼和屏幕截圖。請參閱此鏈接直播回顧:https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2> 
 
    <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2> 
 
</body> 
 

 
</html>

enter image description here

+0

我想你已經回答了你自己的問題,「木裏」不是一個網絡安全的字體,因此,你可以期望在某些瀏覽器意外的行爲是你正在經歷。爲了瀏覽器之間的一致性,請使用不同的字體,最好使用網絡安全字體。這是最佳做法。 – EaziLuizi 2015-03-03 14:17:14

+3

僅供參考,我沒有投票,誰曾經做過投票,至少提供了一個解釋爲什麼你投了票。這不會促進SO中更好的問題/答案。 – EaziLuizi 2015-03-03 14:19:29

+0

iOS Safari應該支持谷歌字體,並在所有其他現代瀏覽器中正確呈現,因此使用「網頁安全」字體不是一種選擇。必須有另一種解決方案。這裏是一個更簡單的問題示例:https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html – Andreas 2015-03-03 14:25:23

回答

34

我發現這個問題的解決方案:iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

移動Safari瀏覽器是馬車渲染虛假的字體粗細,如果你不要設置字體權重(例如font-weight: 400font-weight: normal)您需要專門設置css字體重量讓它在移動Safari瀏覽器中正確渲染。

這是解決方案。

h2 { 
 
    font-weight: 400; 
 
}

+0

如果可以的話,我會給你1000個upvotes。就這個問題浪費了3個小時。 – 2015-12-09 11:42:03

+2

我有一個類似的問題:我設置的重量,但實際上並沒有加載該字體的重量。 – AlexKempton 2016-05-23 16:22:19

6

需要注意的是谷歌的Web字體只能在默認情況下,這可能會導致移動Safari瀏覽器(以及其他瀏覽器)出口的常規重量(400)被強制徵收仿粗體。

要明確導出粗體重量,請在Google Web Font字體選擇窗格中選擇「CUSTOMIZE」,手動檢查您需要的每個額外重量,然後使用更新後的嵌入代碼。

([Screenshot: Google Fonts customise pane)] 1

+0

解決了我的問題,沒有意識到瀏覽器在沒有正確的字體文件的情況下應用了仿粗體, – Brandito 2017-12-13 03:22:53

相關問題