Chinese font web development guide

Author: & http: //www.aliyun.com/zixun/aggregation/37954.html "> nbsp; Ruan Yifeng

Font choice, is one of the key factors in web development.

The right typeface has a decisive influence on the beauty (or readability) of the page.

However, compared with English fonts, Chinese fonts web development has great limitations. Because, a Chinese font must have at least a few thousand characters, the volume of several MB; just to browse the web, developers can not allow users to download fonts, can only rely on the operating system pre-installed fonts. (* Note: There are indeed websites that provide Chinese fonts for web services, which I do not recommend from a technical point of view.)

Different operating systems, different versions pre-installed different fonts (because of copyright), almost no intersection. Therefore, most developers simply ignore the Chinese fonts, let the operating system rendering itself, or pictures with font effects.

The following is the best practice of the current Chinese font, the main reference Kendra Schaefer's article.

First, the operating system pre-installed fonts

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

Windows operating system:

Blackbody: SimHei Arial: SimSun New Arial: NSimSun Imitation Song: FangSong Italic: KaiTi Imitation Song GB2312: FangSongGB2312 Kaleidoscope GB2312: KaiTiGB2312 Microsoft Azure: Microsoft YaHei (Available for Windows 7)

OS X operating system:

Holly Black: Hiragino Sans GB (Available from SNOW LEOPARD) Chinese Fine Black: STHeiti Light (aka STXihei) Chinese Black: STHeiti Chinese: STKaiti Chinese Arial: STSong Chinese Imitation Song: STFangsong

If the user installed MicroSoft Office, but also add some fonts.

Chinese script: STSong Chinese Chinese Song: STZhongsong Chinese imitation Song: STFangsong Founder Shu body: FZShuTi Founder Yao body: FZYaoti Chinese Caiyun: STCaiyun Chinese amber: STHupo Chinese script: STLiti Chinese line Xingkai: STXingkai Chinese New Wei: STXinwei Second, the font-family command

CSS font-family command, specifies the font used by the page element. Below is an example.

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "Microsoft Yahei", STXihei, "Chinese fine black", serif;

It has three rules.

(1) Precedence using the top-ranked fonts.

(2) If the font can not be found, or if the font does not include the text to be rendered, the next font is used.

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

According to these rules, font-family should give priority to the designation of English fonts, and then specify the Chinese fonts. Otherwise, the English alphabet contained in the Chinese font will replace the English font, which is often ugly.

In the above picture, the English letters in the red box are rendered in English font on the left and the Chinese font on the right, which effect is better and at a glance.

In order to ensure compatibility, the Chinese name of the Chinese font and English name, should be written to the font-family. For example, "Microsoft Yahe" English name is Microsoft YaHei.

In addition, the Chinese name of a Chinese font, as well as an English name made up of multiple words, should be enclosed in double quotes.

Third, the Windows platform and Mac platform

Because Chinese fonts for Windows and Mac do not cross, you should specify fonts for both platforms at the same time.

Common practice is that the Windows platform designates "Microsoft YaHei" and the Mac platform designates "STXihei."

Fourth, serif and serif body

The so-called "serif" (Serif), refers to the end of strokes with serif fonts.

Like English fonts, Chinese fonts can also be divided into "serifs" and "sans serifs." For example, for traditional Chinese characters, Microsoft JhengHei is a sans-serif body and a PMingLiU is a serif body.

For simple words, Microsoft yahei is a sans serif and SimSun is a serif.

In general, serifs are highly decorative and often used for titles; sans serifs are sharp and often used in the text.

Fifth, several common Chinese fonts

(1) Times New Roman (SimSun)

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

(2) Microsoft YaHei (Microsoft YaHei)

Microsoft elegant black aesthetics and clarity are better, can be used as the preferred font page. Its corresponding font on Mac platform is STXihei.

However, Windows XP does not pre-install this font, then you can choose to replace the black body (Simhei). However, bold is not bold for small typed text.

(3) Fang Song (FangSong)

This font is a serif body, more decorative than the Song body. If the size is too small, will affect the clarity, so only in the case of font size greater than 14px, can consider this font.

Its corresponding font on the Mac platform is "STFangsong".

(4) KaiTi

The italics are also serifs, decorative and imitation of Times New Roman close, but the width is larger, strokes more clearly. This font should not be used less than 14px.

Its corresponding font on the Mac platform is "STKaiti."

(Finish)