Home > Article > Web Front-end > What are the attributes for setting fonts in html?
Set the font attributes in html: font, font-family, font-size, font-style, font-variant, font-weight, "@font-face", font-size-adjust, font- stretch.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Font properties define font, bold, size, and text style.
Set the font attributes in html
Attributes | Description |
---|---|
font | Set all font properties in one declaration |
font-family | Specify the font family of the text |
font-size | Specify the font size of the text |
font-style | Specify the font style of the text |
font-variant | Specifies the font style of the text. Setting the small caps font to display text means that all lowercase letters are converted to uppercase, but all letters using small caps have a smaller font size compared to the rest of the text. |
font-weight | Specifies the thickness of the font |
@font-face | A rule, Allow websites to download and use other fonts than "Web-safe" fonts |
font-size-adjust | Specify aspect values for elements. Specifies an aspect value for an element so that the x-height of the preferred font is maintained. |
font-stretch | Shrink or stretch the current font family. Scale and transform the current font-family. Not supported by all major browsers. |
Extended information:
In HTML/CSS, there are two types of font family names:
Universal Font Family - A combination of font systems that share a similar appearance (such as "Serif" or "Monospace")
Specific Font Family - A specific font family ( Such as "Times" or "Courier")
Generic family | Font family | Description |
---|---|---|
Serif |
Times New Roman Georgia |
Serif font characters have at the end of the line Additional Decoration |
Sans-serif |
Arial Verdana |
"Sans" means none - these fonts have no additional decoration at the end |
Monospace |
Courier New Lucida Console |
All monospace characters have the same width |
The font-family property should set several font names as a "fallback" mechanism if browsing The first font is not supported by the browser, it will try the next font.
Note: If the name of the font family is more than one character, it must be in quotation marks, such as Font Family: "宋体".
Multiple font families are specified by separating them with a comma:
p{font-family:"Times New Roman", Times, serif;}
The following are some commonly used font combinations and common font families.
Serif Font
Text Example | |
---|---|
This is a headingThis is a paragraph | |
This is a headingThis is a paragraph | |
This is a heading |
This is a paragraph |
字体 | 文本示例 |
---|---|
Arial, Helvetica, sans-serif |
This is a headingThis is a paragraph |
Arial Black, Gadget, sans-serif |
This is a headingThis is a paragraph |
"Comic Sans MS", cursive, sans-serif |
This is a headingThis is a paragraph |
Impact, Charcoal, sans-serif |
This is a headingThis is a paragraph |
"Lucida Sans Unicode", "Lucida Grande", sans-serif |
This is a headingThis is a paragraph |
Tahoma, Geneva, sans-serif |
This is a headingThis is a paragraph |
"Trebuchet MS", Helvetica, sans-serif |
This is a headingThis is a paragraph |
Verdana, Geneva, sans-serif |
This is a headingThis is a paragraph |
Monospace 字体
字体 | 文本示例 |
---|---|
"Courier New", Courier, monospace |
This is a headingThis is a paragraph |
"Lucida Console", Monaco, monospace |
This is a headingThis is a paragraph |
(学习视频分享:css视频教程)
The above is the detailed content of What are the attributes for setting fonts in html?. For more information, please follow other related articles on the PHP Chinese website!