Shulou(Shulou.com)06/02 Report--

This article mainly explains the "HTML page Chinese font CSS how to set", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "HTML page Chinese font CSS how to set" it!

The English font is relatively simple and uniform and easy to set up. And there are few English letters, so even if you redefine a font, the size is not large. Chinese is completely dependent on the font of the operating system, different operating systems have different fonts, the setting is a little complicated. If it is not set up properly, it will cause poor display in some operating systems.

Windows

Chinese font: Microsoft elegant black ("Microsoft Yahei") Song style (SimSun). Microsoft Acer ("Microsoft Yahei") is the best choice.

English font: "Segoe UI"

Classic combination: Microsoft Acer ("Microsoft Yahei") "Segoe UI"

In addition: the Song style uses "\ 5b8b\ 4f53" for better compatibility. Because some versions of Firefox and Opera do not support the writing of SimSun.

Mac OS

Chinese font:

Before OS X 10.6: Chinese boldface (STHeiti) Chinese fine black (STXihei)

After OS X 10.6: boldface-Jane (Heiti SC)

Holly blackbody (Hiragino Sans GB)

PingFang SC: a new Chinese font

English font:

Helvetica Helvetica Neue

San Francisco: a new English font

Classic combination: PingFang SC San Francisco

Android

Chinese font: Droid Sans Fallback is the default Chinese font, so there is no need to set a special Chinese font for Android.

IOS

Consistent with Mac OS.

Linux

Chinese font: Wenquanyi micron black "WenQuanYi Micro Hei"

Chinese font setting

Mac computers may also be equipped with word, so they have Microsoft yahaki fonts, so Mac's own font should be preferred. The order is Mac, Windows, Linux. Roughly, define which font looks good first.

Font-family: PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei; English font

Refer to the settings of Bootstrap4:

Font-family: / / Safari for macOS and iOS (San Francisco)-apple-system, / / Chrome < 56 for macOS (San Francisco) BlinkMacSystemFont, / / Windows "Segoe UI", / / Android Roboto, / / Basic web fallback "Helvetica Neue", Arial, / / Linux "Noto Sans", "Liberation Sans", / / Sans serif fallback / / if none of the previously defined fonts are found, the default sans serif font in the system is used. Because non-serif fonts are usually prettier than serif fonts. Sans-serif, / / Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Refer to modern-normalize:

Font-family: system-ui,-apple-system, / * Firefox supports this but not yet `system- ui` * / 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,' Apple Color Emoji', 'Segoe UI Emoji'

Refer to tailwindcss:

Font-family: ui-sans-serif, system-ui,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; Chinese and English fonts

The rule of font definition is that if the previous font cannot be found, it will be replaced by the latter font. Since Chinese fonts also have English fonts and are usually ugly, English fonts should be defined first. The settings for both Chinese and English fonts are as follows:

Font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Or

Font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" Thank you for reading, the above is the content of "how to set the CSS of Chinese fonts on the HTML page". After the study of this article, I believe you have a deeper understanding of how to set the CSS of Chinese fonts on the HTML page, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.