CSS font style (font)
CSS provides a series of properties for styling text fonts, such as changing fonts, controlling font size and weight, and more.
font-family: set the font; font-style: set the style of the font, such as italic, italic, etc.; font-weight: set the font weight; font-size: set the font size
; font-variant: convert lowercase letters to small caps ;
font-stretch: Stretch and deform the font (rarely used, and not supported by mainstream browsers);
font: Abbreviation for font properties, multiple font properties can be set in one declaration.
1. font-family
The font-family attribute is used to set the font of the text inside the element. With thousands of fonts available, and some not free, it's nearly impossible to have all of them on our computers. In order to ensure that the fonts we set can be displayed normally, you can define a list of several font names through the font-family attribute. The font names are separated by commas. The browser will first try the first font in the list. , if not supported try the next one, and so on.
The possible values for the font-family attribute are as follows:
| value | describe |
|---|---|
| family-name、generic-family family-name： | Font name, a font name represents a font, such as "Microsoft Yahei" is a font; generic-family: font family, that is, a certain type of font combination, a font family represents a type of font, where Contains many similar but different fonts, such as "sans-serif" is a sans serif font that contains many similar fonts. The default value of the font depends on the browser settings |
| you inherit | Inherit font settings from parent element |
The following table lists some commonly used font families (generic-family):
| font family | illustrate | the font |
|---|---|---|
| serif | There are serif fonts, that is, special decorative lines or serifs are added at the end of the text strokes | “Lucida Bright” “Lucida Fax” Palatino “Palatino Linotype” Palladium “URW Palladium” serif |
| sans serif | Sans-serif fonts, which are smooth at the end of the text strokes | “Open Sans”、“Fira Sans”、“Lucida Sans”、“Lucida Sans Unicode”、“Trebuchet MS”、“Liberation Sans”、“Nimbus Sans L”、sans-serif |
| minivan | Monospaced fonts, that is, each text has the same width | “Fira Mono”、“DejaVu Sans Mono”、Menlo、Consolas、“Liberation Mono”、Monaco、“Lucida Console”、monospace |
| cursive | Cursive font, this font has continuous strokes or a special italic effect, which will give people a feeling of handwriting | “Brush Script MT”、“Brush Script Std”、“Lucida Calligraphy”、“Lucida Handwriting”、“Apple Chancery”、cursive |
| fantasy | Fonts with special artistic effects | Papyrus、Herculanum、“Party LET”、“Curlz MT”、Harrington、fantasy |
Use the font-family attribute to set font styles for HTML elements:
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
body {
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
}
</style>
</head>
<body>
<h1>font-family 属性</h1>
</body>
</html>
operation result:
Note: If the font family or font name contains spaces or multiple words, they must be wrapped in quotes, such as "Times New Roman", "Courier New", "Segoe UI", etc., if in the element's style attribute must use single quotes.
2. font-style
The font-style attribute is used to set the font style, such as italic, italic, etc. The optional values of this attribute are as follows:
| value | describe |
|---|---|
| norma | l Default value, text is displayed in normal font |
| italic | text in italics |
| oblique | text italicized |
| you inherit | Inherit font style from parent element |
[Example] Use the font-style attribute to set the style of the font:
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
body {
font-style: oblique;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
.inherit {
font-style: inherit;
}
</style>
</head>
<body>
<p class="normal">normal：显示一个标准的字体</p>
<p class="italic">italic：显示一个斜体的字体</p>
<p class="oblique">oblique：显示一个倾斜的字体</p>
<p class="inherit">inherit：从父元素继承字体样式</p>
</body>
</html>
operation result:
At first glance, you might think italic and oblique have the same effect. In fact, italic displays the italic version of the font, while oblique is just a normal font with a slant.
3. font-weight
The font-weight attribute can set the thickness of the font, and the optional values are as follows:
| value | describe |
|---|---|
| normal | default, standard font |
| bold | bold font |
| bolder | bolder font |
| lighter | thinner font |
100, 200, 300, 400, 500, 600, 700, 800, 900 set the font thickness from thin to thick, 100 is the thinnest font, 400 is equal to normal, 700 is equal to bold
inherit from the parent element to inherit the font thickness
[Example] Use the font-weight attribute to set the font weight:
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
p.weight-100 {
font-weight: 100;
}
p.weight-200 {
font-weight: 200;
}
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<p class="weight-100">font-weight: 100;</p>
<p class="weight-200">font-weight: 200;</p>
<p class="normal">font-weight: normal;</p>
<p class="bold">font-weight: bold;</p>
<p class="bolder">font-weight: bolder;</p>
</body>
</html>
operation result:
4. font-size
The font-size attribute is used to set the size of the font (font size), and the optional values are as follows:
| value | describe |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | Set the font to different sizes in the form of keywords, from xx-small to xx-large, the default value is medium |
| smaller | Set a font size smaller than the parent element |
| larger | Set a font size larger than the parent element |
| length | Set the font to a fixed size in the form of a value plus a unit, such as 18px, 2em% Set a font size relative to the font of the parent element in the form of a percentage |
| you inherit | Inherit font size from parent element |
[Example] Use the font-size attribute to set the size of the font:
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
.xx_small {
font-size: xx-small;
}
.x_small {
font-size: x-small;
}
.small {
font-size: x-small;
}
.medium {
font-size: x-small;
}
.large {
font-size: large;
}
.x-large {
font-size: x-large;
}
.xx-large {
font-size: xx-large;
}
.smaller {
font-size: smaller;
}
.larger {
font-size: larger;
}
.font-20 {
font-size: 20px;
}
</style>
</head>
<body>
<p class="xx_small">将字体大小设置为：xx-small</p>
<p class="x_small">将字体大小设置为：x-small</p>
<p class="small">将字体大小设置为：x-small</p>
<p class="medium">将字体大小设置为：medium</p>
<p class="large">将字体大小设置为：large</p>
<p class="x-large">将字体大小设置为：x-large</p>
<p class="xx-large">将字体大小设置为：xx-large</p>
<p class="smaller">将字体大小设置为：smaller</p>
<p class="larger">将字体大小设置为：larger</p>
<p class="font-20">将字体大小设置为 20 像素</p>
</body>
</html>
operation result:
5. font-variant
The font-variant attribute can convert lowercase English letters in the text to small caps (the converted uppercase letters have the same size as the original lowercase letters, so they are called small caps). The optional values for the font-variant attribute are as follows:
| value | describe |
|---|---|
| normal | By default, the browser will display a standard font |
| small-caps | Convert lowercase English letters in text to small caps |
| you inherit | Inherit the value of the font-variant attribute from the parent element |
| [Example] Use the font-variant attribute to set small caps: |
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
.normal {
font-variant: normal
}
.small {
font-variant: small-caps
}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>
operation result:
6. font
The function of the font attribute is similar to that of the background attribute described above. Through the font attribute, multiple font attributes can be set at the same time. The difference is that the use of the font attribute needs to follow the following order: font: [[font-style||font-variant||
font -weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
When using the font attribute, the following points need to be noted:
when using the font attribute, the order shown above must be followed, and the two attributes of font-size and font-family cannot be ignored; each parameter
in the font attribute is only allowed to set one value, except for the font-size and font-family properties, the ignored properties will be set to their respective default values;
to define the line-height property, you need to use a slash/separate the font-size and line-height properties .
Use the font attribute to define multiple font effects at the same time:
<!DOCTYPE html>
<html>
<head>
<title>CSS字体</title>
<style>
p.info {
font: italic bold 12px/30px arial, sans-serif;
}
</style>
</head>
<body>
<p>使用 font 属性需要遵循以下顺序：</p>
<p class="info">font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar</p>
</body>
</html>
operation result:
