At the end of last year, a bug occurred in Chrome browser, at least on Mac systems (the situation on other platforms is unknown), the system fonts are too thin under small sizes, and the word spacing is too tight; in large sizes, it looks too thick and the word spacing is too wide. Fortunately, the issue has been fixed. However, during the period when the problem existed, I gave up the system font and switched to other fonts. Although the performance dropped slightly, the visual effect improved.

Now a more serious problem occurs: the system font cannot be bolded. This is very bad because many websites use a system font stack because it has two major advantages: 1) helps the website to look consistent with the operating system; 2) has excellent performance because the website does not need to download and display custom fonts.

Jon Henshaw reported on this:

...This bug caught the attention of Adam Argyle, the developer of VisBug and the evangelist of Google's Chrome CSS developer. Argyle created a Chromium bug report, but the Chromium development team finally decided that this would not hinder the release of version 81. This causes sites like Coywolf to fail to use bold text for fonts larger than 16px (e.g., per title).

Since the Chromium team announced the skip of version 82 and will release version 83 in mid-May, the bug will not be fixed in version 82. Argyle assured everyone in the initial GitHub bug report that it will be fixed in version 83.

So we have to wait about four more weeks. ?ime Vidas recommends using Helvetica fonts temporarily as a temporary solution:

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

I think older versions of Chrome/macOS may still benefit from system fonts due to the inclusion of -apple-system ? I'm not sure.

This made me a little confused. When I first heard about using a system font stack, there are -apple-system and BlinkMacSystemFont and you should use them in the font stack in this order. Then there comes -system-ui , which seems to work well alone, which is great because it obviously doesn't rely too much on the Mac system. But there is also system-ui (without starting dash), which seems to do the same thing, I'm not sure which is correct. Now it seems that the plan is ui-sans-serif and its related fonts (such as ui-serif and ui-monospace ). I like the idea, but I hope to get clear instructions from browser vendors about recommended usage. Are we in this situation?

 <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>

Another observation of mine is... When I try to copy this bug on Chrome 81, at first I thought "strangely, it works fine on my system" because I'm trying to bold the default 16px text. I noticed that when the font size is 20px or larger, the problem arises:

Bramus proposes another solution: use Inter fonts.

The above is the detailed content of Chrome System Fonts Snafu. For more information, please follow other related articles on the PHP Chinese website!