preface
A recent study of the font-size: family font Settings on various websites found that each site has a different default value, and even some of the largest sites have made obvious mistakes, indicating that there is a lot of learning about font, we should study carefully.
The default font is different for different operating systems and browsers, and the wrong font setting can cause confusing rendering in different environments. Choosing the right font is the first step to creating a great web page. In this article, we’ll introduce you to fonts and explore how to set them correctly on both PC and Mobile.
Font Basics
Classification of fonts
- Serif (serif)
- Sans -serif
- Monospace (width)
- Fantasy (dream)
- Cuisive (cursive)
It’s not a single font, it’s a font family, it’s a set of fonts, and the ones that we deal with the most are serif and sans serif fonts.
Serif & Sans-serif
Serif means that there is extra decoration at the beginning and end of the strokes, and that the strokes are of different thickness. Serif typefaces are more prominent. Common serif typefaces include Times New Roman and Song Typefaces.
Sans Serif fonts do not have these extra features. They are of roughly the same stroke thickness and have a decent horizontal and vertical font. Common Sans Serif fonts include Tahoma, Verdana, Arial, Helvetica, Apple, Microsoft Yahei, etc.
Monospace (monospace)
A monospaced font is a font with the same character width and is usually used in editors and in code blocks for technical articles. Monospaced fonts are usually used in Western fonts, but in Chinese, they are monospaced for each character. Courier was the most common monospaced font.
Fantasy & Cuisive
The scenarios used in browsers are few and far between.
The font-family property
Set the font for the element. You can specify more than one font at a time. If the browser does not support the first font, it will try the next.
For example: font-family: Arial, sans-serif;
If font-family is not set, the browser default font will be used. If font-family is not set, it will fallback to the browser default font.
Introduction to Common Fonts
Helvetica
A western sans serif font supported by the Apple system. It is the most commonly used set of Western fonts in the Apple ecosystem. Helvetica Neue is an improved version of the Helvetica typeface, with more different sizes and widths.
Arial
It is a sans-serif western font designed to compete with Helvetica. It is similar to Helvetica and is compatible with browsers on different systems.
Tahoma
A sans-serif font with small spacing, compatible across browsers on different systems, and designed to address the shortcomings of Helvetica and Arial, such as the difficulty of distinguishing a capital I from a lowercase L.
San Francisco
Apple introduced a sans-serif font in 2017, which is the default Western font in The Current Apple system. Compared with Helvetica, San Francisco’s font style is more concise, with fewer decorative details, and supports the overall center of symbols, such as time display. Helvetica was not in the middle.
Minimum compatible version: ios9 and macOS10.11
PingFang SC(PingFang SC)
Apple created a Chinese sans serif font specially for Chinese users, and launched it together with San Francisco in 2017. SC stands for simplified Chinese characters, and there are also Taiwan traditional characters and Hong Kong traditional characters. The overall shape is simple and beautiful, and it is the default Chinese font in Apple system.
Minimum compatible version: ios9 and macOS10.11
Hiragino Sans GB(Black Holly), Heiti SC(black black)
Apple’s older Chinese sans serif fonts, which we use as fallbacks for older macOS versions.
Segoe UI
A sans serif western font on Windows. It is the default Western font on Windows.
Microsoft YaHei
The default Chinese font on Windows is also a set of sans serif fonts. Most macOS browsers come pre-loaded with Microsoft Yahei, but safari is not included.
Ios and Android do not support Microsoft Yahei, so you can ignore Microsoft Yahei when setting fonts on mobile devices.
Song typeface
A Chinese serif font, supported by Both Windows and macOS, with a thin, stylistic font.
It is also the default Chinese font on Windows XP and earlier.
WenQuanYi Micro Hei
This font is the default Chinese font on Linux. It is usually set to be compatible with Linux.
Roboto
The default Western font on Android, which is also a sans serif font
Noto Sans (Black body)
The default Chinese sans serif font for Android, an open source font released by Google.
Apple Color Emoji
Apple’s text emojis, which can be seen everywhere on Mac and iOS, are the Emoji we encounter the most.
Segoe UI Emoji
Windows10 Emoji, black stroke style, without apple’s roundness and texture.
Noto Color Emoji
Google’s emoji, which is similar to Apple’s, is flatter.
Default Browser Font
The default font is divided into the system default font and the browser default font, which are different.
Here we are talking about the browser default font, which is described in the system-UI below.
When the element does not specify a font-family or the setting of a font-family is invalid, it fallback to the browser’s default font.
PC
The browser on the PC supports different default fonts.
The image below shows chrome’s configuration options. The standard font is the default font and is enabled when the font-family property is not set.
sans-serifSpecifies a sans serif font as the bottom.
The mobile terminal
Mobile browsers typically do not support specifying default fonts.
The default Ios Chinese font is apple. When the lang is set to zh-cn, the Western font is also Apple. When lang is not set or set to en, the default western font is Times New Roman, a serif font.
<! DOCTYPEhtml>
<html lang='zh-CN'>.Copy the codeAndroid’s fonts are slightly more complex, with the default font being Roboto in Western and Noto Sans in Chinese, but different manufacturers may use custom fonts, such as mi Lankiosk, which is used on some phones.
It is possible for the Android lang to behave differently when set to zh-CN or en, although both are sans serif fonts, but the difference is obvious. Even if the lang is set to zh-cn, the default Western font may look different on different Android devices. One word: chaos.
The mobile terminal system version mentioned above: ios9+ Android4 +
It is the complexity of the default browser font that makes setting the font-family important.
system-ui
System-ui is a universal font series, which selects the default system font under the current operating system. Its advantage lies in that it matches the font used by the current system and can make the Web page and App look more uniform.
use
font-family: system-ui;
Copy the codecompatibility
System-ui is a relatively late launch, but it is relatively compatible and is now supported by all major browsers.
Below isCan I UseCompatibility information on the
– apple-system-apple-system is a compatible writing method of system-UI. It supports only Safari, Firefox, and WebView on ios and macOS.
BlinkMacSystemFont is also a compatible system UI writing method. It is only supported in macOS Chrome. It is mainly for Chrome 53-55
The effect
On ios and macOS, system-UI points to the Chinese font apple square and the Western font San Francisco. In The Android system, the Chinese font is usually Noto Sans (Si Yuan in bold), and the Western font is Roboto. Generally, Microsoft Yahei is used on Windows systems. However, on some Windows systems, font problems occur. Therefore, system-UI is not recommended on Windows.
Sans -serif fonts
In current mainstream terminal devices, sans serif is easier to read than sans serif and is more suitable as the default global font for web pages.
Every system comes with a sans serif font, so sans-serif is usually placed at the end of the pocket, and nothing after the sans-serif takes effect, except Emoji.
The PC browser can be specified in the Settingssans-serifFont.
Mobile browsers cannot specify a sans-serif font in their Settings. They will select the appropriate font based on the locale specified by the lang, which may not be the same as the font specified by system-UI.
Rules for writing fonts
Before introducing the font rules, there are a few points to note:
1. Preset fonts are different on different platforms. For example, Helvetica and Apple are available only on Mac, Microsoft Yahei is available only on Windows (because many people have Office, Microsoft Yahei is also available on Macs), and Android and iOS have different built-in fonts.
Fonts are copyrighted, but if you specify the font name in your CSS without referring to an external font file (such as Web Font or embedded in your App), you don’t need to purchase a license because it’s just a statement that the browser is expected to render the text with a certain font first.
3, The Chinese website involves two types of characters: Western font and Chinese font, western font includes English numbers, etc., does not include Chinese, but Chinese font generally includes English and numbers, we usually set the Western font first, then set Chinese.
4. If the font contains Spaces or Chinese characters, add quotation marks.
The full name of most fonts will contain attributes such as weight, italic, or Longbody, but it is not recommended to use them directly. The style of the font should be specified in the CSS using the font-weight, font-style, or font-stretch properties. It’s up to the browser to decide which font to actually render.
6. Font-family is an inheritable property, and the global font-family is usually set on the body element.
We can summarize the general rules of font definition as follows:
1, Western in the first, Chinese after
Most Chinese fonts contain Western characters, but the Parts of the Western characters are not beautiful, and the Western characters do not contain Chinese characters, so the Western characters are defined first and the Chinese characters are defined later to achieve better display effect.
2. System-ui is preferred
System-ui Uses the default font of the current system, so that the web page and operating system have the same style and better experience.
3. Take into account different operating systems
There are different operating systems to consider when choosing fonts, as well as users of older operating systems.
Even if the same font is used in different operations, there will be subtle differences. We should try to use the same font in the same system to ensure the consistency of fonts in the same system. Try to keep fonts close to each other for different systems, such as using sans serif fonts.
To ensure the use of more elegant Chinese fonts for MAC systems, the Apple font is declared first, and for older versions of macOS that do not support Apple, use Hiragino Sans GB as the bottom.
If you need to be compatible with Linux, you also need to add WenQuanYi Micro Hei fonts.
To be compatible with emojis of different platforms, fonts such as “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, and “Noto Color Emoji” are generally added after sans-serif.
4. End with a serif or sans-serif font family
To ensure proper display in a variety of environments or conditions, sans-serif fonts are usually placed after the font. Non-serif fonts display better on the monitor.
5. Be simple and practical
Font Settings are not as simple as more is better, but as simple as possible to meet the design needs. In the same system, both Chinese and Western fonts can have a fallback, which does not require much.
font
Through the introduction of font knowledge and font setting specifications, we summarize the setting of the global default font.
The mobile terminal
Compatible version: ios9+, Android4 +
Recommended writing:
font-family: system-ui, -apple-system, Arial, sans-serif;
Copy the codeSystem-ui is preferred and Arial is used for fallback because it is similar to Helvetica and is well supported on ios and Android.
PC
Recommended writing method 1: For macOS, system fonts are preferred
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB"."Microsoft YaHei", sans-serif;
Copy the codeRecommended writing method 2: Specify font
font-family: Tahoma, Arial, "PingFang SC"."Hiragino Sans GB"."Microsoft YaHei", sans-serif;
Copy the codeWindows computer screen resolution is generally not high, and Tahoma font has a clear and complete structure under small size, easy to read and identify, and is well supported in different operating systems. Therefore, Arial is used as the preferred font if Tahoma is not pre-installed in the system. But it’s not much different, Arial ahead of time is fine.
Need to be compatible with Linux system and Emoji, you can add WenQuanYi Micro Hei and Emoji fonts, such as:
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB"."Microsoft YaHei"."WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji"."Segoe UI Emoji"."Segoe UI Symbol"."Noto Color Emoji";
Copy the codeTo highlight the font features of macOS and Windows, set Helvetica or Segoe UI in front of Tahoma as the preferred font. For example:
font-family: "Helvetica Neue"."Segoe UI", Arial, "PingFang SC"."Hiragino Sans GB"."Microsoft YaHei", sans-serif;
Copy the codeNote:
1. There is no fixed standard for font setting, which needs to be decided according to the business situation. The above is only a recommended writing method, and if the designer has requirements, it can be changed on this basis.
2, CSS font weight is higher than the browser default font, there are some websites choose not to set the font, use the browser default font, tend to the user’s choice, this is a man’s opinion.
Specify element fonts
If the global default font is invalid for an element with a font-font-faimily setting, it is also a good idea to specify a fallback font with a sans-serif ending.
div {
font-faimiy: "PingFang SC", sans-serif;
}
Copy the codePadding-bottom: 0px; padding-bottom: 0px
First of all, the following is only personal views, if there are mistakes welcome to point out 🙂
Value time: 2020-11-25
Taobao homepage
tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif
Copy the code\5b8b\4f53 is a Font size Unicode encoding, which can effectively prevent browsers from interpreting CSS code with garbled characters. The default font on Taobao’s home page is very simple, but the difference between the sans-serif Holly font used on macOS and the Serif Font used on Windows is obvious.
Jingdong homepage
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
Copy the codeOn the home page of JD.com, Microsoft Yahei is used as the preferred font, so both Chinese and English are Microsoft Yahei. By default, Microsoft Yahei is not supported in macOS Safari, so it fallback to Heiti SC(boldface). As the default Chinese font in earlier versions of macOS, the boldface has been criticized for its bell mouth design for a long time. Of course, JINGdong must have their own considerations in setting such a font, but it is not recommended to put Chinese font in front of Tahoma, Arial and other Western characters, unless required by the designer or business.
Tmall homepage
"Microsoft YaHei",SimSun,'\5b8b\4f53',sans-serif
Copy the codeSimSun: It’s also a Song
As mentioned above, macOS Safari does not support Microsoft Yahei by default, so it will fallback to Song Typeface. Song typeface is a serif font, resulting in a big difference between other macOS browsers and Safari browser fonts.
The following images are for macOS10.14.5, chrome and safari, respectively
Qq.com home page
'Microsoft Yahei'.'PingFang SC'.'Avenir'.'Segoe UI'.'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif'.'WenQuanYi Micro Hei', sans-serif
Copy the codeThe homepage of Qq.com also uses Microsoft Yahei as the preferred Chinese and Western font, and has corresponding fallback on different systems, which is good in theory, but as mentioned above, it is not recommended to start with Chinese font unless designers or business needs.
Sina weibo
Arial,"PingFang SC"."Hiragino Sans GB"."Microsoft YaHei"."WenQuanYi Micro Hei",sans-serif
Copy the codeThe default font of Sina Weibo is very good.
The nuggets home page
-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,ArialCopy the codeThe Nuggets made an obvious mistake here by defining other Chinese and English fonts after the sans-serif, since both are invalid. As a place where the great gods gather, the gold digger should not make such a simple mistake.
Segmentfault homepage
-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC"."Hiragino Sans GB"."WenQuanYi Micro Hei"."Microsoft Yahei",sans-serif
Copy the codePersonally, I think it’s good.
Zhihu homepage
-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif
Copy the codeSource Han Sans SC and Noto Sans CJK SC are both Source bold fonts. Although they are open Source fonts, they are not built in most systems. Is it unnecessary to set them here?
The headline homepage
PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif
Copy the codeAs mentioned above, Helvetica Neue,Arial and other Western fonts are recommended first.
Again, the above is only personal experience, if there is any mistake welcome to point out 🙂
Refer to the link
> > < span style = “box-sizing: border-box; color: RGB (51, 51, 51)
The font you should know is font-family
Font, and font-family
How to choose an elegant font (font-family)
Start with Web fonts – default font style Settings
PingFang SC should not be the preferred font for mobile web pages
Introduction and use of iOS 9 fonts