iOS Safari上的自定義字體渲染

Safari iOS嚴重渲染自定義字體。這裏有什麼問題？iOS Safari上的自定義字體渲染

請注意字體的呈現方式有多不同：在chrome中，筆觸寬度較厚。在Safari中，角色間隔更寬。我認爲Chrome的渲染更加正確。

更新：我收集了迄今爲止答案的建議，但未解決問題。我已經更新了jsfiddle和截圖。現在我不使用粗體或任何默認粗體標籤，只有正常重量的單個字體。我併入了@Vizllx的建議，儘管它似乎沒有幫助。上的jsfiddle

問題例如：

@font-face{ 
    font-family:Lola; 
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff'); 
    font-style:normal; 
} 
.test { 
    font-size: 200%; 
    font-family: Lola; 
    -webkit-text-size-adjust:100%  
}

它的外觀在Chrome中：

enter image description here

下面是它如何看待iOS Safari瀏覽器（「Mozilla的/ 5.0 （iPhone;像Mac OS X的CPU iPhone OS 6_0_1）AppleWebKit/536.26（KHTML，如Gecko）Version/6.0 Mobile/10A523 Safari瀏覽器/ 8536.25" ）

enter image description here

在現實世界中的問題，我用的是普通fontsquirrel字體聲明：

@font-face { 
    font-family: 'Lola'; 
    src: url('../fonts/lola/lola.eot'); 
    src: url('../fonts/lola/lola.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/lola/lola.woff') format('woff'), 
     url('../fonts/lola/lola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

來源

2014-01-09 Julian

在Windows上的Safari，我們看到了同樣的問題，但「-webkit-字體平滑：抗鋸齒;」修復它：http://jsfiddle.net/c9eP5/2/仍在尋找safari-ios修復程序。 – Julian

我看你有相同definen字體蘿拉兩次名稱，不同的文件名，但兩個定義都有font-weight:bold;，這顯然是一個錯字，但可能是瀏覽器以不同方式解釋拼寫錯誤的原因。

不過，我已經看到了其他字體，iOS和Android設備使字體重量（不帶任何附加參數）不同，即使本地人。你的問題的這一部分並不完全清楚，什麼機器和瀏覽器引擎產生了哪個結果。

來源

2014-01-20 13:58:25 Christian

謝謝基督徒。我簡化了示例以避免所有重量問題 - 問題依然存在。希望我對Q的更新更清楚。感謝您注意重量問題。 – Julian

首先，您將兩種字體標記爲粗體，這可能會混淆某些瀏覽器。

但是我包括加粗的字體時也有類似的問題和解決方案未設置字體爲粗體而是使之表現與不同的名稱爲正常，然後使用字體名稱切換大膽。 這不是HTML標準的方式，但它的工作原理。

http://jsfiddle.net/nothrem/ALqt8/6/

@font-face{ 
    font-family:Lola; 
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format('woff'); 
} 
@font-face{ 
    font-family:Lola-bold; 
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola_bold.woff) format('woff'); 
} 
h1 { 
    font-family: Lola-bold; 
}

來源

2014-01-20 14:03:37

謝謝，我更新了•拆卸所有的體重問題 - 只有正常體重這個問題發生。我想你的例子在Chrome和Safari瀏覽器，雖然它顯示了兩個大膽，還有在渲染一個顯著差異。 – Julian

也許你應該嘗試添加其他格式，例如http://www.pmap.co/c/52c0d565/fonts/lola/lola.ttf –

在現實世界的問題中，我這樣做。沒有幫助。使用源代碼CSS查看我對Q的更新。 – Julian

iOS Safari上的自定義字體渲染

回答

相關問題