WecTeam: With so many codes, do you really understand fonts?

WecTeam: With so many codes, do you really understand fonts?

Reprinted from: [WecTeam: Browser composition and rendering layer optimization] (https://mp.weixin.qq.com/s/knmQ1XRwt4sUdwTjORoF4A)

Preface

Many of the coders around me are technical gods, but they are often troubled by simple things like fonts.

In this article, let's talk about common sense about fonts. The problems involved in these common sense have strong operability. They are all encountered in actual business. They all need to be repeatedly communicated with the development classmates, product managers, and designers.

Is the font really just as simple as " system default, no explanation "? Is the product being fooled? Or development is perfunctory? Who can win the game between the two? Learn this article and you will win.

Font classification

Common fonts can be divided into two categories: serif and sans serif .

1. Serif (serif) : There are extra decorations at the beginning and end of the strokes of the characters, and the thickness of the strokes will be different.

Common serifs are:

• Song Ti, Kai Ti • Times New Roman

2. Sans-serif : The stroke thickness is basically the same, only the main body is left, the shape is concise and powerful, and the origin is very late. Suitable for headlines, advertisements, etc., with high recognition.

Common sans serifs are:

•HeiTi•The default Chinese font on Windows platform: Microsoft Yahei•The default English font on Windows platform: Arial•Mac & iOS default Chinese font: PingFang SC•The default English on Mac & iOS platform Font: San Francisco•Android platform default font: Droid Sans

Supplement :

Serif fonts are rarely used nowadays, and the "Sialti" that you are familiar with can basically only be seen in paper publications. The non-serif more modern aesthetic .

So, here is a warm reminder to everyone: Do not use Song Ti for PPT . If you don't know what font to use, just use the default font of the system: Microsoft Yahei for Win platform and Pingfang font for Mac platform.

If you find a designer who uses Times New Roman style when doing poster design or drawing, it means that she must be a layman.

Font family

The font family in CSS can be understood as a certain type of font. Common font families can be divided into five categories:

•Serif: Serif body. • sans-serif: sans serif. • monospace: monospace font. The width of each letter is the same. Use monospace fonts as much as possible for the font used for writing code. •Cursive: handwritten font. For example, Xu Jinglei's handwriting. •Fantasy: Fantasy font. For example, some artistic characters.

These five types of font families do not represent a specific font, but when you specify a font family in CSS, the system may find a font in the font family to display.

Reference link: serif, sans-serif, monospace, cursive and fantasy[1]

Multi-font fallback

The multi-font fallback mechanism can be understood as a kind of bottoming mechanism of fonts. It means: when the specified font cannot be found, it will continue to look for it. such as:

.div{ font-family: "PingFang SC", "Microsoft Yahei", sans-serif;}

The above line of CSS code means: Let the text use Apple's "Ping Fang" font on iOS & Mac operating system, and Microsoft Yahei font on Windows system. If neither of these two fonts are available, just find one. Serif body is displayed.

font-weight: The bold attribute of the font

font-weight The bold font attribute is the attribute that confuses the front-end and product students the most. When you show the finished page to the product manager for experience, the first thing the product manager pays attention to is the problem of bold fonts.

Let's look at font-weightwhat property values are.

When you set font is bold, property values either directly fill 100-900 Such numbers can also fill in normal, boldso words. normalThe value of is equivalent to 400, and boldthe value of is equivalent to 700. as follows:

The key problem is that many people will find that in the browser of the Android platform, no matter if the font-weight is set to 300, 400, or 500, there is no change in the thickness of the text. Only when it reaches 700, it will be thickened. The browser doesn't seem to support these values, is it useful to have so many gears?

In fact, all these numeric keyword browsers are supported. The reason why you don't see any changes in thickness depends on whether the font you are using supports it .

Take the font "Microsoft Yahei" as an example. It only supports two weights, so when you write 500 in the code, it will be considered 400. But the "Ping Fang" font on the Mac supports at least six weights.

Bold fonts on major platforms

A picture is worth a thousand words. Having explained so much, let's take a look at the default fonts of major operating systems and what the bold effect looks like.

The following screenshots are the results of my personal testing. If you plan to let others see the font bolding effect, just throw the image below to him. I'm afraid that there are not many front-ends as caring as I am.

1. The default font bolding effect of the iOS platform : (Ping Fang font)

2. The default font bolding effect of the Android platform (Huawei P30 Pro) : (Droid Sans font)

3. The default font bolding effect of the Mac platform : (Ping Fang font)

4. The default font bolding effect of Windows platform : (Microsoft Yahei font)

Summary : (The default font bold effect of major operating systems)

• Android platform Droid Sans fonts only >=700will bold; but the same bold effect. •Mac & iOS platform "Ping Fang" font: 500 and 600, the bolding effect is different; >=600the bolding effect is the same. • Windows platform, "Microsoft elegant black" font: only >=600take bold, and bold same effect.

Reference: https://cloud.tencent.com/developer/article/1539517 WecTeam: With so many codes, do you really understand fonts? -Cloud + Community-Tencent Cloud