CSS Fonts (Fonts)

CSS font properties allow you to set various styles for fonts, such as the font family, size, boldness, variants, etc.

Font properties

In CSS styles for text content, such as providing several properties:font-family,font-Font style,font-variant,font-weightandfont-size. The next section will introduce these properties one by one.

Font family

Thefont-familyCSS property allows you to set the font family name of the text content, the priority list of font usage.

Thefont-familyProperties can contain multiple font names asFallbackFont. First list the font you want, followed by all fonts (if not available). If the browser does not support the first font, it will try the next one. A font family declaration may look like this:

p {
　　　　font-family: "Times New Roman", Times, serif;
}

etc.

For more information on common font combinations, please check web-safe fonts.

throughfont-Font stylestyle

property sets the font style of the element's text content.normal,At first glance, oblique and italic styles may look the same, but they are different. TheThe possible values of this property are:font, and.

or
　　　　font-p.one {
}
style: normal;
　　　　font-p.two {
}
style: italic;
　　　　font-p.three {
}

Normal font.

font-sizeFont size

property to set the font size of the element's text content.

There are several ways to specify the font size value, such as using keywords, pixels, or ems.

Using keyword to set font sizex-small,medium-small,small,By setting a keyword font size on the body element, you can set relative font sizes on other parts of the page, thereby easily scaling the font throughout the page. Specify an absolute size using one of the following keywords:,xx,medium-xx,x-xx.

largeRelative sizes are specified using one of the following keywords:smaller、、.

body {
　　　　font-larger
}
h1　{
　　　　font-size: large;
}
p {
　　　　font-size: larger;
}

size: smaller;

Using pixels to set font size12When pixel accuracy is needed, use pixel values (such as16px,

h1　{
　　　　font-size:　24px, etc.) is a good choice for setting font size. However, the results may vary from browser to browser because they use different algorithms to achieve similar effects.
}
p {
　　　　font-size:　14px, etc.) is a good choice for setting font size. However, the results may vary from browser to browser because they use different algorithms to achieve similar effects.
}

px;

Adjusts the text size in all browsers. However, this feature will adjust the size of the entire page, not just the text.

emUsing Em to set font size

emThe size of the value is dynamic. The unit refers to the font size of the parent element.font-sizeproperty, an emequals the font size applied to the parent element of the element.

Iffont-sizeSet a as20px, then1em=20pxand2em=40px.

If you have not set the font size anywhere on the page, it is the default value of the browser, which is16px. Therefore, it is the default value of the browser, which is1em=16pxand2em=32px.

h1　{
　　　　font-size:　2em;　　　　/*　32px/16px=2em　*/
}
p {
　　　　font-size: 0.875em;　　　　/*　14px/16px=0.875em　*/
}

using a combination of percentages and Em

to achieve a similar effect in all browsersfont-sizeTo set the default percentage for the body element. One popular technique isfont-sizeset the body's to62.5%（i.e. default16px of62.5％），equal to10px or 0.625em.

Now, you can setfont-sizeBy converting any element using em units, it has an easy-to-remember conversionpxthrough10values are determined in this way10px=1em,12px=1.2em,14px=1.4em,16px=1.6emand so on. See the following examples:

body {
　　　　font-size:　62.5%;　　　　/*　font-size　1em　=　10px　*/
}
p {
　　　　font-size:　1.6em;　　　　/*　1.6em　=　16px　*/
}

Font Thickness

font-weightThe property specifies the thickness or boldness of the font.

font-The possible values of the style property are:normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900andinherit.

• Numerical100- 900specified font weight, where each number represents a darker weight than its predecessor.400withnormal＆700the samebold.

• ofbolderandlighter, while other values are absolute font weights, which are relative to the inherited font thickness.

p {
　　　　font-weight: bold;
}

Since most fonts can only be used in limited weights. Usually, they are only available inNormalandBold Display. If the font is not available in the specified weight, a substitute font will be selected, which is the closest available weight.

Font Variant

font-variantThe property allows text to be displayed in a special uppercase letter form.

Lowercase Uppercase Letters orLowercase Uppercase Lettersslightly different from the normal uppercase letters, in which lowercase letters are displayed as a smaller version of the corresponding uppercase letter.

font-variantThe value of the property may benormal,small-capsandinherit.

p {
　　　　font-variant: small-caps;
}