Chinese Font Web Development Guide

The choice of font is one of the key factors in web development.

The right font has a significant impact on the aesthetics (or readability) of the Web page.

However, compared to English fonts, the Chinese font of web development has great limitations. Because, a Chinese font must have a minimum of thousands of characters, the volume of a few megabytes, in order to browse the Web, developers can not allow users to download fonts, only rely on the operating system pre-installed fonts. (* Note: There are Web services that do provide Chinese fonts, and from a technical point of view, I do not recommend this.) ）

Different operating systems, different versions preinstalled with different fonts (because of copyright), there is little overlap. As a result, most developers simply ignore the Chinese font, let the operating system render itself, or use a picture to render the font effect.

Here are the best practices for the current Chinese font, mainly referring to Kendra Schaefer's article.

First, the pre-installed font of the operating system

The operating system determines which fonts the developer can use. So, in the first step, we have to understand what fonts the operating system provides.

Windows operating system :

• Blackbody: Simhei
• Song Body: SimSun
• New song body: Nsimsun
• Imitation: Fangsong
• Italics: Kaiti
• Imitation gb2312:fangsongGB2312
• Italic Gb2312:kaitiGB2312
• Microsoft Black: Microsoft Yahei (started with Windows 7)

OS X operating system :

• Holly Blackbody: Hiragino Sans GB (SNOW Leopard start to provide)
• Chinese fine Black: Stheiti Light (aka Stxihei)
• Chinese blackbody: Stheiti
• Chinese Italic: Stkaiti
• XXFarEastFont-Arial: Stsong
• XXFarEastFont-Imitation: Stfangsong

If a user has MicroSoft Officeinstalled, there will be some more fonts.

• Official script: Lisu
• Young Circle: Youyuan
• Chinese fine Black: Stxihei
• Chinese Italic: Stkaiti
• XXFarEastFont-Arial: Stsong
• XXFarEastFont-Sung: Stzhongsong
• XXFarEastFont-Imitation: Stfangsong
• Founder Shu Body: Fzshuti
• Founder Arial: Fzyaoti
• Chinese Choi Wan: Stcaiyun
• Chinese Amber: Sthupo
• Chinese script: Stliti
• XXFarEastFont-Xingkai: Stxingkai
• Chinese New Wei: Stxinwei

Second, font-family command

The font-family command for CSS that specifies the font used by the page element. Here is an example.

font-family: Georgia, "Times New Roman",              "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

There are three rules for it.

(1) Priority to use the preceding font.

(2) If the font cannot be found, or if the font does not include the text you want to render, use the next font.

(3) If the fonts listed are not sufficient, let the operating system decide which font to use.

According to these rules, font-family should first specify the English font, and then specify the Chinese font. Otherwise, the English characters contained in the Chinese font will replace the English font, which is often ugly.

The above picture, the red box in the English alphabet, the left with English font rendering, the right to use Chinese font rendering, which effect is better, at a glance.

in order to ensure compatibility, Chinese characters and English names should be written in font-family. For example, the English name of "Microsoft Jas Black" is Microsoft Yahei.

In addition, the Chinese name of the Chinese font, as well as the English name consisting of multiple words, should be enclosed in double quotation marks.

Iii. Windows platform and Mac platform

Because the Chinese font for Windows and Mac is not crossed, you should specify fonts for two platforms at the same time.

As a common practice, the Windows platform specifies "Microsoft Yahei" (Microsoft), and the Mac platform specifies "Chinese fine Black" (Stxihei).

Iv. liner Body and non-liner body

The so-called "liner Body" (Serif), refers to the end of the stroke with a serif font.

Like English fonts, Chinese fonts can also be divided into "serif" and "sans Serif" (san-serif). For example, for traditional Chinese characters, Microsoft Black (Microsoft Jhenghei) is a sans-serif body, and the new fine-body (PMingLiU) is the liner body.

For Simplified Chinese, Microsoft Jache (Microsoft Yahei) is a sans serif body, and the Arial (SimSun) is a serif body.

In general, the liner body decorative strong, often used for the title; Sans serif body clarity is good, often used in the text.

V. Several common Chinese fonts

(1) Arial (SimSun)

Arial is the most common Chinese font, and if no font is specified, the operating system often chooses it to render. Many people think that this kind of font is not beautiful.

(2) Microsoft Jache (Microsoft Yahei)

Microsoft Jas is good in aesthetics and clarity, and can be used as the preferred font for Web pages. Its corresponding font on the Mac platform is the Chinese fine Black (stxihei).

However, Windows XP does not have this font preinstalled, so you can choose a bold (Simhei) alternative. However, boldface is thicker and should not be used for text with smaller font sizes.

(3) Imitation (Fangsong)

This font is a liner body, more decorative than the song body. If the font size is too small to affect sharpness, you can consider this font only if the font size is greater than 14px.

Its corresponding font on the Mac platform is "XXFarEastFont-imitation" (Stfangsong).

(4) in italics (Kaiti)

Italic is also the liner body, decorative and Fangsong close, but the width is larger, strokes more clear. This font should also not be used in less than 14px cases.

Its corresponding font on the Mac platform is "Chinese italic" (Stkaiti).

Article Source: http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html

Chinese Font Web Development Guide