1. The font – size: size

1.1. :

The font-size property is used to set the size

p {  
    font-size:20px; 
}
Copy the code

1.2. The unit:

  • You can use either relative or absolute units of length.
  • The relative length unit is commonly used. Pixel unit px is recommended, while absolute length unit is rarely used.
Unit of relative length instructions
em Font size relative to the text in the current object
px Pixel, most commonly used, recommended


Absolute unit of length instructions
in inches
cm cm
mm mm
pt point

Note:

  • After the text size, we basically use PX, other units rarely used
  • The default text size for Chrome is 16px
  • However, different browsers may display different font sizes by default, so try to give a clear value, not the default size. Body is typically given the size of the entire page text

2. The font-family: font

2.1. :

The font-family property is used to set the font.

Word-wrap: break-word! Important; "> < p style =" max-width: 100%; }Copy the code
  • Common fonts in web pages are Song Typeface, Microsoft yahei, bold, etc. For example, set the font of all paragraphs in web pages to Microsoft Yahei
  • You can specify multiple fonts at the same time, separated by commas, indicating that if the browser does not support the first font, it will try the next font until it finds a suitable font. If none is available, the default font on our computer will be used.
Font-family: Arial,"Microsoft Yahei", "Microsoft Yahei"; }Copy the code

Common skills:

1. Use commas (,) to separate fonts. 2. Chinese fonts need to be quoted in English, but English fonts generally do not need to be quoted. If you need to set an English font, the English font name must precede the Chinese font name. 3. If the font name contains Spaces, #, and $, use single or double quotation marks ("), for example, font-family: "Times New Roman". . 4. Use the default font to ensure that it can be correctly displayed in any user's browser.Copy the code

2.2. CSS Unicode fonts

  • Why Unicode fonts

    • It is possible to set the font name in CSS and write Chinese directly. However, if the file encoding (GB2312, UTF-8, etc.) does not match, garbled characters will be generated.
    • Xp does not support Chinese like Microsoft Yahei.

  • Solution:

    • Plan 1: You can use English instead. Font-family :”Microsoft Yahei”;

    • Scheme 2: Use Unicode encoding directly in CSS to write font names to avoid these errors. Using Unicode to write Chinese font names, browsers can correctly parse them.

font-family: "\5FAE\8F6F\96C5\9ED1"; Indicates to set the font to Microsoft Yahei.Copy the code
The name of the font English names Unicode
Song typeface SimSun \5B8B\4F53
The new song typeface NSimSun \65B0\5B8B\4F53
blackbody SimHei \9ED1\4F53
Microsoft jas black Microsoft YaHei \5FAE\8F6F\96C5\9ED1
Regular script _GB2312 KaiTi_GB2312 \6977\4F53_GB2312
Official script LiSu \96B6\4E66
Young garden YouYuan \5E7C\5706
HuaWenXi black STXihei \534E\6587\7EC6\9ED1
pmingliu MingLiU \7EC6\660E\4F53
New pmingliu PMingLiU \65B0\7EC6\660E\4F53

In order to accommodate font installation problems on different computers, we try to use only Song Style and Microsoft Yahei Chinese fonts

3. Font weight

  • How do we make fonts bold in HTML that we can do with tags
    • Use B and strong tags to bold text.
  • You can do this using CSS, but CSS has no semantics.
Attribute values describe
normal Default value (in bold)
bold Define bold (bold)
100 ~ 900 400 is normal and 700 is bold and we’re going to keep that in mind

Advocate:

We usually prefer to use numbers to indicate bold and not bold.

Font-style: normal

  • How do we tilt fonts in HTML that we can do with tags
    • In addition to using I and EM tags,
  • You can do this using CSS, but CSS has no semantics

The font-style attribute is used to define the font style, such as italic, slanted, or normal font. The available attribute values are as follows:

attribute role
normal By default, the browser will display a standard font style.
italic The browser will display the font style in italics.

Tip:

We rarely italicize text, preferring instead to change the italic tag (em, I) to normal.Copy the code

5. Font: Set font styles comprehensively

The font property is used to set the font style comprehensively

  • The basic syntax is as follows:
< span style = "box-sizing: border-box; color: RGB (50, 50, 50); }Copy the code
  • Note:
    • When using the font attribute, the characters must be written in the sequence specified in the preceding syntax. The characters are separated by Spaces.
    • The properties that do not need to be set can be omitted (the default values are taken), but the font-size and font-family attributes must be retained; otherwise, the font attribute will not work.

6. The font

attribute said Pay attention to the point
font-size The shop name The units we usually use are px pixels, so keep up with that
font-family The font Write fonts according to team conventions in actual work
font-weight The font size Remember that bold is 700 or bold bold is normal or 400 remember that numbers do not follow units
font-style Font style Remember that slant is italic and not slant is normal and we use normal the most in our work
font Font ligatures 1. Font linking is sequential and cannot be changed at will

2. The font and font must appear at the same time