谷歌網頁字體在移動版 Safari 和桌面版 Chrome 上的呈現方式不同？

Question

Google 網絡字體 (Signika) 在桌面和移動設備上的呈現方式不同。 如這些屏幕截圖所示，移動設備上的字距調整（字母之間的間距）比桌面設備大，筆畫更細。 桌面上的字母也看起來更清晰，盡管這更主觀。

桌面（Chrome）：

移動設備（Safari、iOS 12）：

代碼筆：

https://codepen.io/Crashalot/pen/3ff682e5aa123e1ac293ab19b06f1285

 #pageBox h1 { margin: 30px auto; text-align: center; } h1 { font-size: 2em; font-weight: bold; line-height: 1.2em; } h1, h2, h3, h4 { font-family: "Signika", Verdana, Tahoma, Arial, Sans-Serif; color: #7C7A7D; }

 <head> <link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Signika|Source+Sans+Pro:400,700" rel="stylesheet"> </head> <body> <div id="pageBox"> <div class="header"> <h1> Icon Editor </h1> </div> </div> </body>

自托管字體樣式表的 Signika 部分：

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/signika/v10/vEFR2_JTCgwQ5ejvG18mBlprZ0gk0w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/signika/v10/vEFR2_JTCgwQ5ejvG1EmBlprZ0g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Answer 1

事實證明，如果您使用font-weight不支持的font-weight ，Safari 會更改字體（例如，字體文件僅提供 400 和 600 的粗細，但您選擇了 700）。 指定支持的權重或使用normal消除了這個問題。

非常令人沮喪，但希望我們的痛苦可以幫助某人。

Answer 2

從您的問題中，我不確定您是否對原因或如何解決方面更感興趣。 假設如何修復：

由於您使用了字距調整這個詞，您可能已經意識到這一點，但我能夠通過調整以下內容來匹配外觀：

body { 
     letter-spacing: -0.1px; 
     transform: scale(1.05, 0.95);
}

如果您覺得這不太合適，那么這些值當然是可以調整的。

font-kerning: none; 稍微嚴重一些，但確實有助於引擎之間的正常化。

以供參考，

因此，如果您願意，您可以通過許多其他檢查來檢測移動和/或 safari（已在其他問題中回答，因此我將在此處省略），然后應用上面的 CSS。

事實上，如果您問的是為什么存在差異，那歸結為渲染引擎 - 但我現在假設您是在詢問標准化外觀。

Answer 3

@crashalot 字體在 Safari 上看起來與 Chrome 不同的原因是 webkit 略有不同。 避免這個問題的唯一方法是下載字體文件，然后鏈接它們：

body {
...
font-family: Signika;
...
}

@font-face {
font-family: Signika;
src: url(signika.ttf);
}

谷歌網頁字體在移動版 Safari 和桌面版 Chrome 上的呈現方式不同？

問題描述

3 個解決方案

解決方案1
4 已采納 2020-07-09 07:03:08

解決方案2
3 2020-05-07 01:55:52

解決方案3
2 2020-05-05 08:10:27

谷歌網頁字體在移動版 Safari 和桌面版 Chrome 上的呈現方式不同？

問題描述

3 個解決方案

解決方案1 4 已采納 2020-07-09 07:03:08

解決方案2 3 2020-05-07 01:55:52

解決方案3 2 2020-05-05 08:10:27

解決方案1
4 已采納 2020-07-09 07:03:08

解決方案2
3 2020-05-07 01:55:52

解決方案3
2 2020-05-05 08:10:27