Interesting CSS property font family

font-familyIs a website user experience first entrance, it is very necessary to spend time to study. First, we need to understand serif fonts and sans serif fonts, then we need to understand the common Chinese and English fonts and their applicability.

Serif font

Serif（serif）Each stroke has its own style, the end of the stroke will be decorated, emphasizing the sense of art, suitable for blog, tourism, culture, art website.

Sans Serif

No serif（sans-serif）The font is neat and square, giving people a formal feeling, suitable for government and enterprise websites.

Chinese font

Windows

• simsunSong style, toowindowsThe default font for most browsers,font-sizeWhen it is larger, the clarity is poor.
• Microsoft Yahei, sans serif font, Microsoft YaHei, is a Chinese font designed by China founder.

Mac OS

• STHeiti, Chinese boldface,OS X 10.6Before the simplified Chinese system interface default font, is also the currentChromeThe default font under the explorer.
• STXihei, Chinese fine black, thanSTHeitiThe text is finer.
• Heiti SCFrom Jane, boldfaceOS X 10.6At first, bold Jane replaced Chinese bold as the default font of simplified Chinese system interface, and the display effect was good, but the bell mouth design was criticized.
• Hiragino Sans GB, Holly black, fresh professional print font, small size is enough clear, has many people’s pursuit.
• PingFang SC, Ping Fang, inMac OS X EL CapitanOn the top, apple created for Chinese users, removed the trumpet mouth that is criticized by others.

Linux

• WenQuanYi Micro Hei, WenQuanYi micron black,LinuxBest simplified Chinese font.

English font

Windows

• Arial, sans serif Western font, the display effect is general.
• Tahoma, sans serif font, display effect ratioArialGood.
• VerdanaThe advantage of sans serif typeface is that it is still clear in structure and easy to read.

Mac OS

• Times New Roman, serif font,MacplatformSafariUnder the default font.
• Helvetica、Helvetica NeueIs widely used.
• San FranciscoLike Pingfang,mac osThe latest Western Font.

Font family setting principle

• Western language first: most of the Western Fonts do not contain Chinese, and western language takes precedence, followed by Chinese, which will not affect the choice of Chinese font.
• From new to old: give priority to the best font experience, downward compatibility.
• Compatible with multiple operating systems: considerationswindows, mac os, android, linuxAnd so on.
• Add font family: last according to serifserifOr no serifsans-serifTo supplement the font family, when all the set fonts cannot be found, the operating system can choose the direction of the font.

Recommended by font family

font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

---

First link

---

Scan the lower applet code or searchTusi blog, read the latest articles now!