Website Development Advanced (41) Chinese Font web Development Guide

Website Development Advanced (41) Chinese Font web Development GuideObjective

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.

preinstalled fonts for 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 Office installed, 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

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", "Microsoft Jas Black",             Stxihei, "Chinese fine Black",             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.

Windows platforms and Mac platforms

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).

liner Body and sans serif 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.

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).

American and American Pictures

Website Development Advanced (41) Chinese Font web Development Guide