鉻系統字體snafu

去年年末，Chrome瀏覽器出現了一個bug，至少在Mac系統上（其他平臺情況未知），系統字體在小尺寸下顯示過細，字間距過緊；在大尺寸下則顯得過粗，字間距過寬。幸運的是，該問題已修復。但問題存在期間，我因此放棄了系統字體，轉而使用其他字體，雖然性能略有下降，但視覺效果有所提升。

現在出現了一個更嚴重的問題：系統字體無法加粗。這非常糟糕，因為許多網站都使用系統字體棧，因為它有兩大優勢：1）有助於網站外觀與操作系統保持一致；2）性能優越，因為網站無需下載和顯示自定義字體。

Jon Henshaw對此進行了報導：

……這個bug引起了Adam Argyle的注意，他是VisBug的開發者，也是谷歌的Chrome CSS開發者佈道者。 Argyle創建了一個Chromium bug報告，但Chromium開發團隊最終決定這不會阻礙81版本的發布。這導致像Coywolf這樣的網站無法對大於16px的字體使用粗體文本（例如，每個標題）。

由於Chromium團隊宣布跳過82版本，並將在5月中旬發布83版本，因此該bug不會在82版本中修復。 Argyle在最初的GitHub bug報告中向所有人保證，它將在83版本中修復。

所以我們還要再等大約四周。 Šime Vidas建議暫時使用Helvetica字體作為臨時解決方案：

 <code>body { font-family: -apple-system, Helvetica; }</code>

我想，由於包含了-apple-system ，舊版本的Chrome/macOS仍然可能受益於系統字體？我不確定。

這讓我產生了一些困惑。當我第一次聽說使用系統字體棧時，有-apple-system和BlinkMacSystemFont ，你應該按此順序在字體棧中使用它們。然後出現了-system-ui ，它似乎可以單獨很好地工作，這很好，因為它顯然不太依賴於Mac系統。但是還有system-ui （沒有起始破折號），它似乎也做同樣的事情，我不確定哪個是正確的。現在看來，計劃是ui-sans-serif及其相關字體（如ui-serif和ui-monospace ）。我喜歡這個想法，但我希望能從瀏覽器廠商那裡得到關於推薦用法的明確說明。我們是不是正處於這樣的境地？

 <code>/* 只是一个猜测... */ body { font-family: ui-sans-serif, system-ui, -system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji"; }</code>

我的另一個觀察是……當我嘗試在Chrome 81上複製這個bug時，一開始我以為“奇怪，在我的系統上工作正常”，因為我正在嘗試對默認的16px文本進行加粗。我注意到，當字體大小為20px或更大時，問題就出現了：

Bramus提出了另一種解決方法：使用Inter字體。

以上是鉻系統字體snafu的詳細內容。更多資訊請關注PHP中文網其他相關文章！