CSS font usage

CSS font settings

Font family
Syntax: font-family: [[<Family Name> | <Family Name>],] * [<Family Name> | <Family Name>]
Allowed value: <Family Name> any font family name can be used.
<Family> serif (e.g., times)
Sans-serif (e.g., Arial or Helvetica)
Cursive (e.g., zafc-Chancery)
Fantasy (e.g., Western)
Monospace (e.g., courier)
Initial Value: determined by the browser
Applicable to: all objects
Backward compatibility: Yes

Font Deformation
Syntax: font-variant: <value>
Allowed value: normal (normal) | small-caps (small capital letter)
Initial Value: normal
Applicable to: all objects
Backward compatibility: Yes

Font Style
Syntax: font-style: <value>
Allowed value: normal (normal) | italic (italic) | oblique (skewed)
Initial Value: normal
Applicable to: all objects
Backward compatibility: Yes

Bold font
Syntax: font-weight: <value>
Allowed value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Initial Value: normal
Applicable to: all objects
Backward compatibility: Yes
The font bold attribute is used to describe the font bold. When other values are absolute, the bolder and lighter values increase proportionally.
Note: because not all fonts have nine valid bold displays, some bold fonts are combined under the specified one. If the specified bold value is invalid, the following principles apply:
500 will be replaced by 400, and vice versa
100-300 will be specified as the next fine bold, if any, otherwise it will be the next rough bold
600-900 will be specified as the next thick bold, if any, otherwise it will be the next fine bold

Font Size
Syntax: font-size: <absolute size >|< relative size >|< length >|< percentage>
Allowed values: <absolute size> XX-small | X-small | medium | large | X-large | XX-large
<Relative size> larger | smaller
<Length>
<Percentage> (in relation to parent element)
Initial Value: Medium
Applicable to: all objects
Backward compatibility: Yes
The font size attribute is used to modify the font display size. The absolute length (unit: Pt-pixel and In-inch) must be carefully considered for its weaknesses in adapting to different browsing environments. For a user, the font with an absolute length may be large or small.
Some sizes are defined as follows:
H1 {font-size: Large} p {font-size: 12pt} li {font-size: 90%} strong {font-size: larger} web page makers need to be clear that Microsoft Internet Explorer 3.x mistakenly treats em and ex units as pixels, which may make the text using these units unreadable. The browser incorrectly regards the percentage value as the default font size relative to the selected part, rather than the font size of the upper-level element. This approach is like H1 {font-size: 200%}, which is considered as twice the default font size of the top-level title of IE, it is not twice the font size of the parent element. In this case, the body is usually considered as a superior element and it is likely to define a medium font size. However, in ie, the default font size of a level-1 title may be considered XX-large.
Note these errors. When using the font size attribute, the Web Page Maker should be careful with the percentage value and avoid using EM and ex as much as possible.

 

 

Font Style name

Some Chinese fonts are inevitable for websites, such as and. The general method for writing Chinese Characters in CSS is: font-family: "", ""; this is a similar expression, but for a utf8 encoding platform like WordPress, a failure to convert the encoding will lead to the failure of the Chinese font to form according to the expected font table. Therefore, we can use English and Unicode to express Chinese characters. For example, the font-family: "" and ""; can be written as font-family: "Microsoft yahei", "simhei"; some versions of Firefox and opera do not support simhei writing, using font-family: \ 5fae \ 8f6f \ 96c5 \ 9ed1;

These unicode characters are too hard to remember. The following shows some common fonts.

文	Stheiti light [stxihei]	\ 534e \ 6587 \ 7ec6 \ 9ed1
文	Stheiti	\ 534e \ 6587 \ 9ed1 \ 4f53
文	Stkaiti	\ 534e \ 6587 \ 6977 \ 4f53
文	Stsong	\ 534e \ 6587 \ 5b8b \ 4f53
文	Stfangsong	\ 534e \ 6587 \ 4eff \ 5b8b
Li pro	Lihei pro Medium	\ 4e3d \ 9ed1 pro
Lisong pro	Lisong pro light	\ 4e3d \ 5b8b pro
Standard entity	Biaukai	\ 6807 \ 6977 \ 4f53
Apple Lili black	Apple ligothic Medium	\ 82f9 \ 679c \ 4e3d \ 4e2d \ 9ed1
Apple lixisong	Apple lisung light	\ 82f9 \ 679c \ 4e3d \ 7ec6 \ 5b8b
Windows
New body	Pmingliu	\ 65b0 \ 7ec6 \ 660e \ 4f53
Fine body	Mingliu	\ 7ec6 \ 660e \ 4f53
Standard entity	Dfkai-sb	\ 6807 \ 6977 \ 4f53
Simhei	Simhei	\ 9ed1 \ 4f53
	Simsun	\ 5b8b \ 4f53
Xin	Nsimsun	\ 65b0 \ 5b8b \ 4f53
Imitation Song	Fangsong	\ 4eff \ 5b8b
Body	Kaiti	\ 6977 \ 4f53
Imitation Song _ gb2312	Fangsong_gb2312	\ 4eff \ 5b8b_gb2312
_ Gb2312	Kaiti_gb2312	\ 6977 \ 4f53_gb2312
Microsoft is in bold	Microsoft jhenghei	\ 5fae \ x8f6f \ 6b63 \ 9ed1 \ 4f53
	Microsoft yahei	\ 5fae \ 8f6f \ 96c5 \ 9ed1
Office
Shu	Lisu	\ 96b6 \ 4e66
Youyuan	Youyuan	\ 5e7c/5706
文	Stxihei	\ 534e \ 6587 \ 7ec6 \ 9ed1
文	Stkaiti	\ 534e \ 6587 \ 6977 \ 4f53
文	Stsong	\ 534e \ 6587 \ 5b8b \ 4f53
文中	Stzhongsong	\ 534e \ 6587 \ 4e2d \ 5b8b
文	Stfangsong	\ 534e \ 6587 \ 4eff \ 5b8b
Founder Shu-Ti	Fzshuti	\ 65b9 \ 6b63\ 8212 \ 4f53
Founder Yao Ti	Fzyaoti	\ 65b9 \ 6b63 \ 59da \ 4f53
文 cloud	Stcaiyun	\ 534e \ 6587 \ 5f69 \ 4e91
Mandarin amber	Sthupo	\ 534e \ 6587 \ 7425 \ 73c0
文	Stliti	\ 534e \ 6587 \ 96b6 \ 4e66
文	Stxingkai	\ 534e \ 6587 \ 884c \ 6977
Chinese New Wei	Stxinwei	\ 534e \ 6587 \ 65b0 \ 9b4f

 

There is a way to quickly obtain the Unicode encoding of fonts

 

CSS font setting (effects set by different browsers)

It is easy to set the CSS font. Our engineers use the force to adjust the font size in different browsers and get the right results. In fact, a deep understanding can play a major role.

Font-size attributes:

The font-size attribute can be set to any HTML Tag, for example, <br/>. Values that can be assigned are various values, such as absolute, relative, and length values.

The font-size attribute of an element automatically inherits the font-size attribute value of its parent node element unless you overwrite it. This is important when you set the relative size for font-size.

Absolute keywords set for font-size:

The following absolute font size settings are valid. Of course they are pre-defined in the browser. When an absolute keyword font-size is specified for an element, the element does not inherit the font size of the parent element.

• Font-size: XX-small;
• Font-size: X-small;
• Font-size: small;
• Font-size: medium;
• Font-size: large;
• Font-size: X-large;
• Font-size: XX-large;

Although most browsers support the above keywords, their exact size is different.

Absolute font-size:

Fone-size can be set to the following absolute size:

• Mm: Mm, for example, 10mm.
• Cm: Centimeter, for example, 1 cm (= 10mm ).
• In: Inch (inch), for example: 0.39in (~ = 10mm ).
• PT: Point (point), 1 Pt is equivalent to 1/72 inch, for example: 12pt.
• PC: Pica (12-point active text), 1 PC is 12pt
• Px: Pixel (pixel), for example, 14px.

Generally, the above measurement units have some problems.

For example, millimeters, centimeters, and inches are inaccurate for different media. Because of different resolution settings, Pt and PC are relatively unreliable. PIX is the most suitable, but it can lead to some auxiliary problems: the font size cannot be adjusted again in IE.

Relative size: the font-size attribute can be set to the relative font size relative to the parent node.

• Em: 1em is equivalent to a font of 1 times the current font size. 2em is equivalent to 2 times the current font size.
• %: 100% is equivalent to the current font size, and 200% is equivalent to 2 times the font size.
• Ex: 1ex is equivalent to a font of the same size as the 'X' height in the current font.

Few developers use ex. In fact, in some cases, ex is quite useful. For example, when you need a more precise font size, 1ex is better and more accurate than 0.525em.

% Is equivalent to Em values, for example, 50% = 0.5em, 100% = 1em, 120% = 1.2em, etc,

Although there will be few subtle differences in Some browsers, it is rare after all. If you want to save smaller bytes, you need to use shorter names to define the font-size value. For example, 50% occupies less bytes than 100% em, and 1em occupies less bytes.

The text font size and page scale-down.

This is a complex and in-depth aspect. Most browsers allow users to perform the following operations in the browser:

1. Increase or decrease the basic font size (excluding images)

2. The page is scaled in and out of all text and images.

3. Not only can the font be scaled down, but also the page be scaled down

Note (in-depth understanding): in IE, if the font of an element on the page is assigned a value in pixels, the font of the element will not change when the page is scaled down.

If a designer with a background in the printing industry is about to move to web design, we recommend that you do not give users too much rights or they will disrupt your design. When your design work is enlarged to 200%, or the font is reduced to 50%, it will be damaged.

CSS font-size setting suggestions (standard)

In general, EM or % is used in most cases, so that the font can be supported by the browser with a more fine-grained font. I personally suggest using % to define the font-size, which is better supported in some old browsers.

When developing a website, you have the following suggestions:

1. Reset the font size of all browsers before testing.

2. Define the font size as reasonably as possible to maintain good readability when the page is scaled down.