As the saying goes, 95% of the quality of web design depends on the typesetting of fonts. Despite the prevalence of Douyin, small videos and games, which occupy most of our spare time, most people still read on the Internet, such as looking up information, reading novels, watching news, and learning knowledge.

A comfortable reading experience makes people feel happy and comfortable, and naturally people are more willing to spend time on the website. Before introducing the content about CSS fonts, it is necessary for us to understand some basic knowledge about fonts.

1. General font family

There are five commonly used font families, namely sans-serif (sans serif), serif (serif), monospace (equal width), cursive (handwriting) and fantasy (fantasy).

1, serif serif, sans-serif sans-serif

Serif refers to the decorative lines added to the endpoints of text strokes, because sans means "nothing" in French, so sans-serif is sans serif, contrary to serif fonts, sans serif The line body completely abandons the decorative serifs, leaving only the main body. The shape is concise and powerful, and it is more modern. It is very suitable for titles or advertisements. It can be clearly seen from the picture below that the protruding red part is the serif.

2. Equal width monospace

Monospace font means that all letters and numbers have the same width. For Chinese, most of the characters are designed with equal width, but English is different. For example, the width of W and i is different. Many, this also causes some troubles in typesetting sometimes. If you specify monospace, the monospace font preset by the system will be automatically applied.

3. Handwritten cursive and fantasy

Handwriting and fantasy font are actually a bit similar. Handwriting is like writing with a brush or pen. This font tries to imitate human handwriting. Usually, this font has a large modification at the end of the stroke, compared with serifs The fonts are more gorgeous. In Chinese, the default handwriting is usually standard script, and the fantasy font is in addition to handwriting, with more decorations or textures on the font. Most Chinese presets do not support fantasy fonts. If you set , it will automatically be replaced by serif or sans serif.

2. Both Windows and Mac systems Supported English fonts

The English fonts listed below are usually pre-installed in our computers, whether it is Mac or Windows, the support is above 90%, and there is no problem in using them .

1. Sans-serif

Arial, Arial Black, Arial Narrow, Charcoal, Geneva, Impact, Trebuchet MS, Tahoma, Verdana

2. Serif:

Georgia, Times New Roman, Times

3. Handwriting cursive

Comic Sans MS

4. Equal width monospace

Courier New

5. Fantasy

Copperplate, Papyrus

3. Commonly used Chinese fonts

Because there are fewer letters in English fonts, there are more types of default fonts. Chinese characters are different. The number of words in a Chinese character is much larger than that of English, so the display will be different on cross-platforms. This is also a common problem when making web pages (the design looks good on Mac, but it is out of shape on Windows), and the commonly used ones are listed below. Chinese font name, some browsers can use Chinese, but to be on the safe side, it is recommended that you use the English name or use both Chinese and English.

1. Windows system

• Microsoft YaHei
  

• Microsoft JhengHei ( Microsoft JhengHei )

• New fine body ( PMingLiU )

• Standard Kai ( DFKai-SB )

2. Mac system

• PingFang

• Heiti (STHeiti)

• Italic ( STKaiti )

• LiHei Pro ( LiHei Pro )

• Li Song Pro ( LiSong Pro )

4. Introduction to font-family usage

Using font-family is very simple, only need to set family-name (font name) and generic-family (general font), font-family can set a font or several different fonts. Each font is separated by a comma ",". When the browser loads the web page style, it will judge from the first font on the left. If there is no corresponding font, it will directly use the following For a font, if there is no available font in the end, the computer default font will be used. At this time, the default font can be specified through generic-family.

For example, the following line of CSS will first find the first font, if it does not support or does not have the font, then use the second font, and so on, and finally use the common character, as you can see from the example below You don't need to add double quotes to the font name, but if your font name has a space in the middle, you must add double quotes.

5. Introduction to commonly used font attributes (CSS1, CSS2 part)

The following content is the CSS attributes commonly used in CSS typesetting fonts. I will briefly list them for the time being to help you Looking back, I will introduce the key parts in a later article.

1, color

is used to specify the color of the text.

p {
 color: #993;
}

2. text-align

Controls the alignment of the text, with left, center, right, or justify. Justify means justify both ends.

h1 {
 text-align: center;
}

3, line-height

Line-height refers to the vertical distance between the baselines of lines of text. The baseline (base line) is not the bottom edge of Chinese characters, but the bottom edge of the English letter "x". The distance between the two red lines in the figure below is the line height, the distance between the bottom line of the upper line and the top line of the next line is the line spacing, and the distance between the top line and the bottom line of the same line is font-size. line-height=line spacing+font-size

p {
 line-height: 1.6;
}

4, letter-spacing

Controls the spacing between letters, often used in heading elements.

h1 {
 letter-spacing: 0.8em ;
}

5, word-spacing

controls the spacing between words. Typically applied to heading elements.

h2 {
 word-spacing: 2em;
}

6. text-indent

Indents the first line of text in a paragraph. When we read more formal periodicals or newspapers, the first line of a paragraph usually has two blank characters. In CSS typesetting, we use this attribute to control.

h2 + p {
 text-indent: 2em;
}

7, text-decoration

Text decoration attributes, we can use underline, overline, line-through, and none to modify text, such as underline, overline, middle strikethrough, etc.

h3 {
 text-decoration: underline;
}

8, font-style

The font attribute of the text, its usage is very simple, there are several attribute values ​​such as normal (normal), italic (italic), oblique (italic).

h4 {
 font-style: italic;
}

9, font-weight

Word weight. Used to precisely set the thickness of the text, which can be set within the specified value range (100 to 900; 100~400 is normal, 700 is bold; 100 is thin), or by keyword: bold, bolder , or lighter to set. (h1~h4 are bold, do not use font-weight instead of H tags)

h1 {
 font-weight: 100;
}

10, text-transform

This attribute is used to set the case of the text, the default value is none, and the size form is consistent with the source document. In addition to this, there are other attribute values: uppercase (uppercase), lowercase (lowercase) and capitalize (the first letter of each word capital).

11, font-variant

Font deformation, this attribute has many values ​​in CSS3, but in the standards of CSS1 and CSS2, there are only two values: normal and small-caps. small-caps is used for English letters, meaning small capitals, the size is the same as lowercase letters, and the style is uppercase. Commonly used in English titles and the first line of paragraphs.

<style>
h1 {
font-variant: small-caps;
}
h1 code {font-variant:normal}
</style>

<h1>
 The Use of <code>font-variant</code> On the Web
</h1>

section

I will share today’s content with you, thank you for reading, in the next In the article, I will continue to share font-related knowledge with you, such as font-face, variable fonts, and writing modes, so stay tuned...

< section class='horizontal-tb' >

Focus on sharing the most practical front-end technology at the moment. Pay attention to front-end experts, and learn and progress together with them!

Long press to follow 'Frontend Master'