CSS Font Knowledge Finishing Summary

1. What is a font

Font is the outer form of text, is the style of the text, is the coat of text. such as running script, regular script, cursive, are a kind of font. The same word will be different for everyone to write, it can be said that everyone has a potential font library. For Web pages, a font is a set of text displays stored on your computer. Improve the readability of text in different contexts by doing some special processing of text, such as end-stepping.

For example, the same size of text, in different fonts under the readability is different.

Generally speaking, the birth of a font, to be through the design of the typeface designer, font production staff a stroke of the production, modification, technical development personnel to encode characters, add program instructions, loading library, development and installation procedures, testers to the font for proofreading, software testing, compatibility testing, Production department to the font of the final product and packaging listed several links. In general, text is a one-to-many relationship with the font library, so for multi-lingual web pages, designers are not allowed to consider a language when choosing a font.

2, font-family

Most of the introduction to font-family is simply that he can set the font name sequence in the text. In fact, the real function of font-family is to make a list of approximate fonts in order of precedence, and the browser starts with the first item and finds the first available font to display the text.

Font-family:times New Roman, "Open-sans", "Young Circle", Sans-serif

When the browser displays a character, it will first look for the character from Times New Roman, and if found, use the Times New Roman font to display the character. If you do not find the Open-sans to find, if found in the font display characters, not found will be searched in turn, if not found in the Universal Font Library Sans-serif will be replaced with a missing character (usually a small box).

 <  p  style  = ' font-family:  times New Roman, "Open-sans", "Young Circle", Sans-serif '  >  <  span  >  time is Money </ span  ><  span  >  Time is money. </ span  >  </ p  >  

For example, the above code, for the Chinese part of the browser will first go to Times New Roman find, did not find, and then go to Open-sans Find, still no find, continue to "young circle" in search, the young circle can find the corresponding character is displayed with the font. The English part can be found in times New Roman and is displayed with this font.

In font-family, sometimes the font is quoted without quotation marks. The difference is that the processing of the font name Hollow lattice is different. When no quotation marks are omitted, whitespace characters between the left and right sides of the font are ignored, and white space characters between the words are interpreted as a white space character. such as Font-family:times New Roman, Sans-serif. is interpreted as Font-family:times New Roman,sans-serif. When quoting, you need to keep all the spaces in the quotation marks. For example font-family: "Times New Roman", Sans-serif. The browser will look for the "Times New Roman" font.

3. Universal Font Family

It is suggested that the definition of a font is the end of a category, such as Sans-serif, to ensure that the pages are displayed correctly under different operating systems. The common font family is serif (serif font), Sans-serif (non-liner font), which can be easily understood to be displayed by selecting a font from the font family when all fonts are invalidated.

A font family represents a variety of fonts that have certain types of attributes, and the choice of fonts in the font family is entirely browser-determined. The font that the designer gives should cover as many systems as possible, rather than relying on the font family. The font family must be put to the last one in font-family.

Serif serif font, usually refers to the use of the end of the principle of strengthening the font, by adding small changes at the end of the text to change the readability of small text.

All of the above fonts are lined, and the end of the text is lined with lines. Chen Xian fonts are highly readable, and are often used for works such as newspapers, books, and so on, with large sections of text as representations. Common serif fonts are Georgia, Garamond, Times New Roman, Chinese Arial and so on.

Sans-serif non-serif fonts, all fonts other than serif fonts become non-serif fonts. Non-liner font lines are more uniform, usually in WordArt, the use of more in the title.

Because the non-liner font note is more uniform, the readability in the small text is not as good as the serif font. Common non-liner fonts have trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese young circles, official script and so on.

In summary, the liner font is suitable for small text display, if the use of non-liner font to ensure that font-size large enough to ensure the readability of the text content . 11PX in English is recommended to use the liner font, for Chinese, in any case is not recommended 11px under the display.

4, @font-face

@font-face is a way to link a font on a server, like making a picture link, the browser will download the corresponding font to the local cache according to this instruction, and use it to modify the text.

  <identifier>: Font name

  <url>: This value refers to the storage path of your custom font, which can be a relative path or an absolute path

<string>: This value refers to the format of your custom font, which is primarily used to help the browser identify the following types of values: TrueType, opentype,web Open font format, Embedded-opentype, SVG, etc.

<font>: Defines a font-related style in which text that conforms to the style is displayed using that font.

Both formats for TrueType (. ttf), OpenType (. OTf) work correctly on most browsers. The Web open font format (. woff) is the best format for Web fonts, which is a compressed version of an open Truetype/opentype, and also supports the separation of meta-packets. Embedded Open Type (. EoT) is the private font format for IE. SVG (. svg) fonts are a format that is based on SVG font rendering. Browser compatibility for these formats is listed in the following table.

  

@font-face{font-family: ' Open-sans '; Src:url ('./open-sans/opensans-regular.eot '); /* ie9+ */Src:url ('./open-sans/opensans-regular.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */U RL ('./open-sans/opensans-regular.woff ') format (' Woff '),/* Chrome, Firefox */url ('./open-sans/opensans-regular.ttf ') format (' TrueType '),/* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/url ('./open-sans/opensans-regular.svg#f Ontname ') format (' SVG ');        /* IOS 4.1-*/} @font-face{font-family: ' Open-sans '; Src:url ('./open-sans/opensans-bold.eot '); /* ie9+ */Src:url ('./open-sans/opensans-bold.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */url ( './open-sans/opensans-bold.woff ') format (' Woff '),/* Chrome, Firefox */url ('./open-sans/opensans-bold.ttf ') format (' TrueType '),/* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/url ('./open-sans/opensans-bold.svg#fontname ') fo Rmat (' svg '); /* IOS 4.1-* *        Font-weight:bold; }

<Pstyle= ' font-family:Open-sans,sans-serif '> <span>Time is money.</span><span>Time is money.</span></P><Pstyle= ' font-family:open-sans,sans-serif;font-weight:bold; '> <span>Time is money.</span><span>Time is money.</span></P>

The above code two times the @font-face command defines a font family, using the Opensans-regular font in general, and the Opensans-bold font when bold. This also confirms what we have said above, for fonts in font families are automatically selected by the browser based on the current settings.

If you want to use @font-face often need to do some optimization work, such as some font library is too large to keep only the text used in the page, for the Chinese font is more so, this time the Spider (fontspider) tool can help us; for further optimization, You can reduce an HTTP request by embedding the font file in a CSS file in base64 encoding, and the  homepage is in this way (here and here).

This tool can be used for compression of font libraries.

Reference article:

Excellent website look at the front- Note introduction page

About font application in Web Design (1) Font Set

CSS Font Knowledge Collation summary