Font applications for web development and web development Fonts
Font-family, a link that is easily overlooked, but directly affects the website experience.
This article does not talk about technical details, but only about design principles.
1. English name
Try not to use the following statement:
Font-family: "文 "," ";
Using a Chinese name directly may cause support problems, and switching between editors may also cause garbled characters. The Chinese font also has an English name. The st文 is STXihei, The is Microsoft YaHei, And the is Simsun. The following statement is the same as the above one:
font-family: STXihei, "Micorosoft YaHei";
The following table lists the Chinese and English fonts:
2. correctly declare the font sequence in English and then in Chinese (if possible, replace it with the English name), and add the font family.
font-family: STXihei, "Micorosoft YaHei", sans-serif;
The reason why English is in front is that many Chinese fonts are ugly. If you are not sure that your computer will have the font you declare, you 'd better add a font family to the back to facilitate the system to find an alternative.
In addition, the font declaration in Mac should be placed in front of the Window. Because windows do not have a Mac image, Mac users may have installed Microsoft's Office. Therefore, putting Mac before it will not affect windows users.
3. correctly select the font family. We often use sans-serif in CSS, but are you sure you want to use it properly? Fonts in CSS can be divided into two categories:
Sans-serif(Non-lined font family, sans is a French prefix, meaning no .) And
Serif(Linefeed font family ). The main difference between the two is that one is not modified, and the other is modified.
We can see that the sans-serif strokes are relatively smooth and the thickness is even, while serif will be slightly modified at the beginning and end of the strokes. Therefore, serif fonts are easier to recognize and the overall reading experience is better than that of sans-serif. Sans-serif emphasizes the individual text, which is usually used to make titles more eye-catching. In general, serif can be used to increase the readability of the text. Sans-serif is preferred for posters and webpage titles. Sometimes sans-serif is used for aesthetic section, but serif is used for large sections. In addition to the above two fonts, there are also the following types: Monospace: Same Width font family. Suitable for displaying code, which indicates the fonts include Courier, MS Courier New, and Prestige; cursive: handwritten font family. There are many correspondence-style Web pages, such as Caflisch scripts and Adobe Poetica. fantasy: Fantastic font family. The listening name is an artistic font, indicating that the fonts include WingDings, WingDings 2, WingDings 3, and Symbol.
When designing a webpage, You must select a font family based on your needs, instead of directly copying and pasting the family.
4. Pay attention to compatibility. For Windows, Mac OS, and Linux, the pre-installed fonts of different systems are different. Considering the Display Effect of each system, we should try our best to achieve a consistent experience. In addition, the fonts of different versions of the same operating system may be different. For example, there is no pre-installed in XP, so we need to be backward compatible:
font-family:Arial, STXihei, "Microsoft YaHei", SimSun, sans-serif;
However, in XP, if you do not specify the Chinese font of a webpage, is used by default, so the SimSun above is actually redundant in XP.
The above only takes into account compatibility in the PC environment, as well as mobile compatibility. Apple has a special iOS 7 font support list and found a default font table for mainstream mobile phones on the Internet:
IOS system
The default Chinese font is Heiti SC.
The default English font is Helvetica.
The default numeric font is HelveticaNeue.
Android system
The default Chinese font is Droidsansfallback.
The default English and digital fonts are Droid Sans.
Winphone System
The default Chinese font is Dengxian)
The default English and digital fonts are Segoe.
(No !)
5. Use a Custom font. If you really want a consistent experience, using a Custom font is the best choice. With font-face, it is not necessary to restrict it to security fonts. However, browser compatibility still needs to be considered. Mainstream browsers support. ttf/. otf suffix fonts. IE9 + only supports. eot fonts (font-face is not supported under IE8 ).
In addition, on mobile devices, I think it is important to consider whether to use a Custom font. First, traffic problems, and second, the default Chinese font differences between mobile systems are not obvious.
Use a Custom font. Pay attention to some nice fonts on the Internet and add them to your favorites for future use.
