Font-family, this is a very easy to ignore the link, but directly affect the experience of the site.
This article does not discuss the technical details, only says the design criterion.
1. Use English name
Try not to use the following declaration method:
font-family: "Chinese fine Black", "Microsoft Jas Black";
There may be a support problem with the Chinese name directly, and switching between editors can be garbled. Chinese font is also in English name, Chinese fine black called Stxihei, Microsoft ya Black called "Microsoft Yahei", the song body called SimSun, the following statement and the above paragraph effect is the same:
Font-family:stxihei, "Micorosoft Yahei";
Here is a copy of the Chinese and English font table:
2. Correctly declare the font order first English, then Chinese (if possible to replace with English name), and finally add the font family.
Font-family:stxihei, "Micorosoft Yahei", Sans-serif;
Why is English in front, because many Chinese fonts in English display are ugly. If you are not sure that the user's computer will have the font you declared, it is best to add the font family behind, so that the system to find alternatives.
In addition, the font declarations in the Mac are placed in front of the window. Because there is no Mac in the window below the Chinese fine black, and Mac users may have installed Microsoft Office. So putting your Mac in front of you won't have any effect on Windows users.
3. Correct selection of font families we often use Sans-serif in CSS, but are you sure it's appropriate? The fonts in CSS can be divided into two main categories:
Sans-serif(Non-liner font family, sans is a French prefix, which means nothing.) ) and
Serif(serif font family). The main difference between the two is that one has no modification and one has a modification.
Can see Sans-serif strokes are relatively flat, uniform thickness, and serif at the beginning and end of the stroke will have a little decoration. Therefore, the serif font is easy to recognize some, the overall sense of reading is stronger than Sans-serif. Sans-serif, however, emphasizes the individual character and is often used to make headlines more prominent. In general, the text of the article with serif can increase legibility. Posters, page titles and other parts with Sans-serif better. Sometimes for the sake of the beauty of the small section will also use Sans-serif, but when it comes to large space, or to use serif. In addition to the above two fonts, there are several: monospace: equal width font family. Suitable for displaying code, representing fonts with Courier, MS Courier New, Prestige, etc. cursive: handwritten font family. In the letter style of the page with more, representing the font has Caflisch Script, Adobe Poetica, etc. fantasy: Fantasy font family. Listen to the name is a very artistic font, representing the font has WingDings, WingDings 2, WingDings 3, symbol and so on.
When actually designing a webpage, you should choose the font family according to the different requirements, instead of copying and pasting directly.
4. Focus on compatibility Windows,mac Os,linux, different system pre-installed fonts are different, to take into account the display of each system, as far as possible to achieve a consistent experience. Also, different versions of the font library for the same type of operating system may differ. For example, XP below is not preinstalled Microsoft Jas, so we also have to backwards-compatible:
Font-family:arial, Stxihei, "Microsoft Yahei", SimSun, Sans-serif;
However, under XP, if you do not specify the Chinese font page, the default is to use the song body, so the above SimSun in XP is actually redundant.
The above is only to consider the compatibility of the PC environment, as well as the mobile side of compatibility. Apple has a dedicated iOS 7 font support list, online to find a mainstream phone default font table:
IOS system
The default Chinese font is Heiti SC
The default English font is Helvetica
The default digital font is Helveticaneue
Android system
The default Chinese font is Droidsansfallback
The default English and digital fonts are droid Sans
Winphone system
Default Chinese font is Dengxian (founder and other line body)
The default English and digital fonts are Segoe
(No Microsoft YA-hei!) ）
5. Use custom Fonts If you really want to do a consistent experience, then using a custom font is the best choice. With Font-face, you don't have to be confined to a safe font. However, there is still a need to consider browser compatibility. Mainstream browsers support. TTF/.OTF suffix font, ie9+ only supports. EOT fonts (IE8 below does not support Font-face).
In addition, if it is on the mobile device, the individual think that the use of custom fonts should be considered carefully, one is the flow problem, and the other is the default Chinese font of the mobile end of the system is not obvious differences.
Use custom fonts, usually on the internet to pay more attention to some good-looking fonts, collection, in case of a rainy future.
Web Development Font Application
