Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand some basic knowledge points of Font in CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to understand some basic points of Font in CSS".

1. What is a font

Font is the external form of the text, that is, the style of the text, is the coat of the text. For example, walking script, regular script and cursive script are all a kind of font. Everyone will write the same word differently, and it can be said that everyone has a potential font library. For web pages, fonts are a set of text displays stored on the computer. Through some special processing of the text (such as end reinforcement) to improve the readability of text in different environments.

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

Generally speaking, the birth of a font has to go through the creative design of the font designer, the stroke-by-stroke production and modification of the font maker, and the technical developers encode the characters, add program instructions, install the library, develop and install the program. Testers proofread the font, software testing, compatibility testing, production departments to the final production of the font and packaging listing and other links. Generally speaking, there is an one-to-many relationship between text and font library, so for multi-language supported web pages, designers are required to consider more than one language when choosing fonts.

2 、 font-family

Most of the introduction to font-family simply means that he can set the sequence of font names in the text. In fact, the real role of font-family is to put a series of similar fonts into a list in order of priority, and the browser starts with the first item to find 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 in Times New Roman, and if it finds it, it will display the character in Times New Roman font. If you can't find it, look for it in open-sans. If you don't find it, you will display characters in this font. If you don't find it, you will look for it in turn. If you can't find it in sans-serif, you will use a missing character instead (usually a small box).

Time is money Time is money.

For example, the above code, for Chinese characters part of the browser will first go to Times New Roman to find, did not find, and then go to open-sans to find, still not found, continue to "baby circle" in the search, the corresponding characters can be found in the font to display. The English part can be found in Times New Roman and will be displayed in this font.

Sometimes fonts are in quotation marks and sometimes there are no quotes in font-family. The difference lies in the handling of spaces in font names. Without quotation marks, the white space characters at the left and right ends of the font are ignored, and the white space characters between 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 you add quotation marks, 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 font "Times New Roman".

3. Universal font family

W3C recommends defining fonts that end with a category, such as sans-serif, to ensure that web pages are displayed correctly under different operating systems. The common font families are serif (serif fonts) and sans-serif (sans serif fonts), which can be simply understood as when all fonts are invalid, the browser selects a font from the font family to display.

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

Serif serif fonts usually refer to fonts that use the end reinforcement principle to change the readability of small text by adding small changes to the end of the text.

The above fonts are serif fonts, and serif is used at the end of the text. Chen Xian's font is highly readable and is usually used in works such as newspapers and books in the form of large paragraphs of text. Common serif fonts are Georgia, Garamond, Times New Roman, Chinese Song style and so on.

Sans-serif sans serif fonts. All fonts except serif fonts become sans serif fonts. The lines of non-serif fonts are relatively uniform, and they are usually used more in art characters and headings.

Because the text of the non-serif font is more uniform, the readability of the small text is not as good as the serif font. Common sans serif fonts are Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese young circle, official script and so on.

To sum up, serif fonts are suitable for the display of small text, and if you use non-serif fonts, make sure that the font-size is large enough to ensure the readability of the text. Serif fonts are recommended for English under 11px, and display under 11px is not recommended for Chinese.

4. @ font-face

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

Font name

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

: this value refers to the format of your custom font, which is mainly used to help browsers identify it. There are mainly the following types of values: truetype, opentype,Web Open Font Format, embedded-opentype, svg, etc.

Defines a font-related style in which text that conforms to the style settings is displayed

Truetype (.ttf) and opentype (.otf) work well on most browsers. Web Open Font Format (.woff) is the best format in Web fonts. It is an open compressed version of TrueType/OpenType and also supports the separation of meta packets. Embedded Open Type (.eot) is the proprietary font format of IE. Svg (.svg) fonts are a format based on SVG font rendering. Browser compatibility for these formats is listed in the following table.

CSS Code copies content to the clipboard

@ 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 * /

Url ('. / 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 percent /

Url ('. / open-sans/OpenSans-Regular.svg#fontname') 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 percent /

Url ('. / open-sans/OpenSans-Bold.svg#fontname') format ('svg'); / * iOS 4.1-* /

Font-weight:bold

}

CSS Code copies content to the clipboard

Time is money Time is money.

Time is money Time is money.

The two @ font-face commands in the above code define a font family, using OpenSans-Regular fonts in normal cases and OpenSans-Bold fonts in bold. This also confirms what we said above, that fonts in the font family are automatically selected by the browser according to the current settings.

If you want to use @ font-face, you usually need to do some optimization work. For example, if the font library is too large, you need to retain only the text used in the web page, especially for Chinese fonts. At this time, the FontSpider tool can help us. For further optimization, the font file can be embedded in the css file in base64 encoding to reduce an http request, as is the case with Xiaomi's home page (here and here).

You can use this tool for font library compression.

At this point, I believe you have a deeper understanding of "how to understand some basic knowledge points of Font in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.