Summary of some basic knowledge points of font in CSS

1, what is the font

Font is the external form of text, is the style of words, is the coat of words. such as running script, regular script, cursive, are a kind of font. The same word can be written differently for everyone, so everyone has a set of potential font libraries. For Web pages, fonts are a set of text displays that are stored on your computer. Improve the readability of text in different contexts by making some special handling of the text, such as the end enhancement.

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

Generally speaking, the birth of a font, to go through the creative design of fonts designers, font production staff a stroke of the production, modification, technology developers to encode characters, add program instructions, loading library, development of installation procedures, testers to the font for proofreading, software testing, compatibility testing, The production department of the final product of the font and packaging listed several links. In general, text and Font library is a one-to-many relationship, so for multi-language supported web pages, designers should not be able to consider a language when choosing fonts.

2, font-family

Most of the introductions about font-family only indicate that he can set the sequence of font names in the text. In fact, the real role of font-family is to make a list of approximate fonts in order of precedence, and the browser starts from the first item, 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 first looks for the character from The Times New Roman and, if found, displays the character in the Times New Roman font. If you do not find the Open-sans to find, if found on the font to display characters, did not find will be found in turn, if not found in the Common font library Sans-serif will be replaced with a missing character (usually 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 Chinese characters part of the browser will first go to the Times New Roman find, did not find, and then go to the Open-sans to find, still did not find, continue to "young circle" to look for, the young circle can find the corresponding characters in the font to display. For the English part can be found in the Times New Roman will be used to display the font.

In font-family sometimes the font is quoted sometimes without quotes. The difference is that the font name is handled differently from the hollow grid. When no quotes are omitted, whitespace characters between the left and right sides of the font are ignored, and the white space between the words is interpreted as a blank character. Like 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

The consortium recommends that the definition of a font end with a category, such as Sans-serif, to ensure that pages are displayed correctly under different operating systems. Common font family is serif (serif font), Sans-serif (not serif font), you can simply understand that when all fonts are invalid, the browser from the font family to select a font to display.

A font family represents a variety of fonts that have certain characteristics, and the choice of fonts in the font family is entirely browser-determined. The fonts given by the designer should cover all systems as much as possible and should not rely on the font family. The font family must be put on the last one of the font-family.

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

The above fonts are serif fonts, and the ends of the text are lined with lines. Chen Xian fonts are highly readable and often used as a form of writing in large sections of text such as newspapers, books, etc. Common serif fonts are Georgia, Garamond, Times New Roman, Chinese XXFarEastFont-Arial and so on.

Sans-serif is not a serif font, and all fonts other than serif fonts become serif fonts. Non-liner fonts are more evenly spaced, often used in WordArt and headings.

Because the non liner font note is more uniform, the readability of the small text is inferior to the serif font. The common non liner fonts are trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese XXFarEastFont-tw, XXFarEastFont-Arial, and so on.

To sum up, serif font suitable for small text display, if the use of Font-size font to ensure that the large enough to ensure the readability of the body content. 11PX recommended the use of line font, for Chinese, in any case not recommended 11px under display.

4. @font-face

@font-face is a way to link fonts on a server, just like a picture link, the browser downloads the corresponding font to the local cache according to this instruction, and uses it to decorate the text.

<identifier>: Font name

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

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

<font>: Defines font-related styles, and text that matches the style is displayed using that font.

Both TrueType (. ttf), OpenType (. OTF) formats work correctly in most browsers. The Web open font format (. woff) is the best format for Web fonts, an open Truetype/opentype compressed version, and also supports the separation of meta packets. The 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.

CSS Code copy content to clipboard

1. @font-face{
2. font-family: ' Open-sans ';
3. Src:url ('./open-sans/opensans-regular.eot ');/* ie9+ */
4. Src:url ('./open-sans/opensans-regular.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */
5. url ('./open-sans/opensans-regular.woff ') format (' Woff '),/* Chrome, Firefox */
6. url ('./open-sans/opensans-regular.ttf ') format (' TrueType '), * Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/
7. url ('./open-sans/opensans-regular.svg#fontname ') format (' SVG ');/* IOS 4.1-*/
8. }
9. @font-F ace{
10. font-family: ' Open-sans ';
11. Src:url ('./open-sans/opensans-bold.eot ');/* ie9+ */
12. Src:url ('./open-sans/opensans-bold.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */
13. url ('./open-sans/opensans-bold.woff ') format (' Woff '),/* Chrome, Firefox */
14. url ('./open-sans/opensans-bold.ttf ') format (' TrueType '), * Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/
15. url ('./open-sans/opensans-bold.svg#fontname ') format (' SVG '); /* IOS 4.1-*/
16. font-weight:bold;
17. }
18.  

CSS code copy content to clipboard

1. <p style= ' Font-family:open-sans,sans-serif ' >
2. <span> time is Money </span><span>time is money.</span>
3. </p>
4. <p style= ' font-family:open-sans,sans-serif;font-weight:bold; ' >
5. <span> time is Money </span><span>time is money.</span>
6. </p>

The two times @font-face command in the above code defines a font family that uses Opensans-regular fonts in general and Opensans-bold fonts when bold. This also confirms what we said above that the fonts in the font family are automatically selected by the browser according to the current settings.

If you want to use @font-face usually need to do some optimizations, such as some of the font library is too large to retain only the text used in the page, especially for Chinese fonts, when the Spider (fontspider) tool can help us; for further optimization, You can reduce an HTTP request by embedding a font file in a base64 encoding into a CSS file, which is the way the Millet Home page works (here and here).

You can use this tool for compression of font libraries.