I’ve written an introduction to Web fonts and tips for using them:
- Font-family is the font you should know.
This article basically does not have much mobile font selection and analysis. And after all this time, there’s something new about Web fonts today, hence this article.
The text starts here.
Font-family: arial, sans-serif
As a front-end habit, I always like to open developer tools to review elements from time to time when browsing various websites. Font-family: ‘Comic sans Ms’, sans-serif;
- Tmall:
font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; - Github:
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; - CSS-Tricks:
font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
Interestingly, font definitions like system-UI, -apple-system, BlinkMacSystemFont, etc., which were almost unheard of in font-family a few years ago, are now commonplace. What are they? Is it a particular font?
Font Basics
Before continuing, let’s briefly review some of the basics of fonts.
Serif and sans serif fonts
In terms of some fonts commonly used on the Web, there are basically serif and sans serif fonts.
Serif typeface – The keyword is Serif, meaning serif typeface, which means extra decoration with small details called serifs at the end of the character strokes, and the strokes can vary in thickness, and these details are particularly noticeable in uppercase letters.
Sans serif font — The keyword is sans-serif, which means sans serif. A typeface without serif in Western languages, as opposed to the boldface in Chinese characters. In contrast to serif fonts, which are mechanical and linear, they tend to have the same curvature, straight lines, and sharp corners.
In Chinese, sans-serif fonts are bold, and bold characters are also known as square or isoline characters. Without serif decoration, they are dignified, horizontal and vertical strokes, and the handwriting is all of the same thickness.
For the basics of fonts, it is recommended to have a look at this article you should know font family
The font-family keywords
Font family in CSS has two types of values.
-
One is a specific font family name definition like this: font-family: Arial where we define a specific font style, the font family is Arial;
-
One is the generic font family name, which is an alternative mechanism for giving a better font when the specified font is not available, like this: font-family: sans-serif.
Among them, sans-serif table sans serif font family, for example, “Open Sans”, “Arial”, “Microsoft Yahei” and so on.
In CSS Fonts Module Level 3 — Basic Font Properties, there are 5 common Font family names:
- Serif serif font family
- Sans-serif family of non-serif fonts
- Monospace is a font in which every word is the same width
- A cursive font
- Fantasy is mainly typefaces that have special artistic effects
Added common font family keywords
In CSS Fonts Module Level 4 — Generic Font Families, several keywords have been added:
- System-ui Indicates the default system font
- Emoji used for compatible emoji characters
- Math applies to mathematical expressions
- Fangsong this font series is used for Chinese (imitation song) fonts.
Let’s look at the system-UI that we use the most.
system-ui
In short, the purpose of font-family: system-ui is to automatically select the default system font for different operating system Web pages.
Defaulting to the system font for a particular operating system can improve performance because the browser or WebView doesn’t have to download any font files and instead uses existing font files. The advantage of the system-ui font setting is that it matches the fonts currently in use by the operating system, so it can be displayed most appropriately for text content.
San Francisco Fonts
OK, that’s a brief overview of the System-UI font family. But things like -apple-system and BlinkMacSystemFont don’t appear in the latest standards. What do they mean?
Before I do that, I need to know the San Francisco Fonts.
San Francisco Fonts, also known as San Francisco Fonts, are a type of Western font. With the iOS 9 update, WatchOS will be available quietly alongside Apple Watch, and it will also be available in the new tvOS on Apple TV.
San Francisco Fonts are used on iOS as an alternative to upgrading another Western font, Helvetica Neue. Apple has made some important changes to make it a better, even perfect, Spanish font for the platform.
-apple-system/BlinkMacSystemFont
Anyway. As every front-end developer knows, it’s one thing to get a feature into the specification and another to get it into the browser.
Fortunately, the adoption of system-UI is fast. Chrome and Safari can fully support it on a variety of platforms. Only Mozilla and Windows are behind.
Can I Use system-UI — system-UI
Look closely at the last two lines of the image above:
- Supported as the -apple-system value (only on macOS and iOS)
- Supported as the BlinkMacSystemFont value (only on macOS)
For different platforms and backward compatibility, we need to use -apple-System and BlinkMacSystemFont to be compatible with the System-UI standard on macOS and iOS.
Segoe UI
Segoe UI is the default Western font family for Windows starting from Vista. It has only Western characters and does not support Chinese characters. It is a sans serif font.
It also represents a series rather than a single font. Font-family: Segoe UI; font-family: Segoe;
Roboto
Roboto is a family of sans serif fonts designed for the Android operating system. Google describes the font as “modern, yet approachable” and “affectionate.”
This font family includes Thin, Light, Regular, Medium, Bold, and Black with matching italics.
To summarize
At this point, we can sum up. Take the definition of font-family from CSS-Tricks as an example:
{
font-family:
system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
Helvetica,Arial,
sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}
Copy the code- System-ui, using the default system font on each supported platform
- -Apple-system, on some lower versions of Mac OS X and iOS, it is updated to use the more appropriate San Francisco Fonts for Neue Helvetica and Lucida Grande Fonts on older versions
- BlinkMacSystemFont, for some Chrome browsers on Mac OS X, uses the system default font
- Segoe UI, select the system default font on Windows and Windows Phone
- Roboto, for Android and some new versions of Chrome OS
- Helvetica,Arial, after using the default system font for different operating systems and platforms, for some of the lower versions of the browser downgrade scheme
- Sans-serif, to ensure that the font style is uniform, at least sans serif font
The above five font family definitions are defined in descending order of priority. It can be seen that none of them is a specific font, and the basic core idea is to select the default system font on the corresponding platform.
The operating system covers iOS, MAC OS X, Android, Windows, and Windows Phone.
The main reason for using the system default font is performance. Fonts are usually one of the largest/heaviest resources loaded on a website. If we could use fonts already on the user’s machine, we wouldn’t need to get font resources at all, making the load time significantly faster.
And the advantage of the system font is that it matches the current operating system, so its text display must be a comfortable display effect.
Of course, the above definition of font-family is not necessarily optimal. For example, Tmall adds “PingFang SC”,miui,.. They must also have business considerations. However, some fallback schemes have the same idea of backward compatibility, which is worth studying.
The last
For those who are interested in further discussion of font details, check out the following articles:
- Using UI System Fonts In Web Design: A Quick Practical Guide
- System Fonts in CSS
- Apple ‘s San Francisco the Font
Well, the end of this article, I hope to help you 🙂
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.