去年年末，Chrome瀏覽器出現(xiàn)了一個(gè)bug，至少在Mac系統(tǒng)上（其他平臺(tái)情況未知），系統(tǒng)字體在小尺寸下顯示過(guò)細(xì)，字間距過(guò)緊；在大尺寸下則顯得過(guò)粗，字間距過(guò)寬。幸運(yùn)的是，該問(wèn)題已修復(fù)。但問(wèn)題存在期間，我因此放棄了系統(tǒng)字體，轉(zhuǎn)而使用其他字體，雖然性能略有下降，但視覺(jué)效果有所提升。

現(xiàn)在出現(xiàn)了一個(gè)更嚴(yán)重的問(wèn)題：系統(tǒng)字體無(wú)法加粗。這非常糟糕，因?yàn)樵S多網(wǎng)站都使用系統(tǒng)字體棧，因?yàn)樗袃纱髢?yōu)勢(shì)：1）有助于網(wǎng)站外觀與操作系統(tǒng)保持一致；2）性能優(yōu)越，因?yàn)榫W(wǎng)站無(wú)需下載和顯示自定義字體。

Jon Henshaw對(duì)此進(jìn)行了報(bào)道：

……這個(gè)bug引起了Adam Argyle的注意，他是VisBug的開(kāi)發(fā)者，也是谷歌的Chrome CSS開(kāi)發(fā)者布道者。Argyle創(chuàng)建了一個(gè)Chromium bug報(bào)告，但Chromium開(kāi)發(fā)團(tuán)隊(duì)最終決定這不會(huì)阻礙81版本的發(fā)布。這導(dǎo)致像Coywolf這樣的網(wǎng)站無(wú)法對(duì)大于16px的字體使用粗體文本（例如，每個(gè)標(biāo)題）。

由于Chromium團(tuán)隊(duì)宣布跳過(guò)82版本，并將在5月中旬發(fā)布83版本，因此該bug不會(huì)在82版本中修復(fù)。Argyle在最初的GitHub bug報(bào)告中向所有人保證，它將在83版本中修復(fù)。

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

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

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

這讓我產(chǎn)生了一些困惑。當(dāng)我第一次聽(tīng)說(shuō)使用系統(tǒng)字體棧時(shí)，有-apple-system和BlinkMacSystemFont，你應(yīng)該按此順序在字體棧中使用它們。然后出現(xiàn)了-system-ui，它似乎可以單獨(dú)很好地工作，這很好，因?yàn)樗@然不太依賴于Mac系統(tǒng)。但是還有system-ui（沒(méi)有起始破折號(hào)），它似乎也做同樣的事情，我不確定哪個(gè)是正確的?，F(xiàn)在看來(lái)，計(jì)劃是ui-sans-serif及其相關(guān)字體（如ui-serif和ui-monospace）。我喜歡這個(gè)想法，但我希望能從瀏覽器廠商那里得到關(guān)于推薦用法的明確說(shuō)明。我們是不是正處于這樣的境地？

<code>/* 只是一個(gè)猜測(cè)... */
body {
  font-family: 
    ui-sans-serif, 
    system-ui, 
    -system-ui, 
    -apple-system,
    BlinkMacSystemFont,
    Roboto, Helvetica, Arial, 
    sans-serif, 
    "Apple Color Emoji";
}</code>

我的另一個(gè)觀察是……當(dāng)我嘗試在Chrome 81上復(fù)制這個(gè)bug時(shí)，一開(kāi)始我以為“奇怪，在我的系統(tǒng)上工作正?！保?yàn)槲艺趪L試對(duì)默認(rèn)的16px文本進(jìn)行加粗。我注意到，當(dāng)字體大小為20px或更大時(shí)，問(wèn)題就出現(xiàn)了：

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

以上是鉻系統(tǒng)字體snafu的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！