Home >Web Front-end >HTML Tutorial >CSS font_html/css_WEB-ITnose
CSS font_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:041488browse
CSS font
Navigation
1. Font type
2. Font size
3. Font Style
4. Font thickness
1. Font family
The font-family property sets the font family of the text.
The font-family attribute should set several font names as a "fallback" mechanism, if the browser does not support the first font, he 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 separated by a comma:
Example
p{font-family: "Times New Roman", Times, serif;}
2. Font size
font-size attribute sets the size of the text.
The ability to manage text size is very important in web design. However, you cannot adjust the font size to make a paragraph look like a heading, or a heading to look like a paragraph.
Be sure to use the correct HTML tags, for 4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc for headings and e388a4556c0f65e1904146cc1a846bee for paragraphs:
Font size values can be absolute or relative size.
Absolute size:
Set the text to a specified size
Do not allow the user to change the text size in all browsers
Absolute size is useful when the physical size of the output is determined
Relative size:
Set the size relative to surrounding elements
Allow the user to change the text size in the browser
Remark If you don’t specify a font size, The default size is the same as a normal text paragraph, which is 16 pixels (16px=1em).
3. Font style font-style
is mainly used to specify the font style attribute of italic text.
This attribute has three values:
Normal - the text is displayed normally
Italic - the text is displayed in italics
Italic text - the text is slanted to one side (very similar to italics , but not very supported)
4. Font-weight
is mainly used to specify the font weight of the font
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="CSS字体"/><meta name="description" content="CSS字体"/><meta name="author" content="xiaobei qq:2801616735"/><title>CSS字体</title></head><body> <h1 style="text-align:center">CSS字体</h1> <ul> <li>1、字体类型</li> <li>2、字体大小</li> <li>3、字体样式</li> <li>4、字体粗细</li> </ul> <h2>1、字体类型-font-family</h2> <p style="border:1px red dashed; font-family:'Arial Unicode MS', serif, '华文行楷';">字体类型</p> <hr/> <h2>2、字体大小-font-size_采用像素</h2> <p style="border:1px red dashed; font-size:10px;">设置字体大小像素</p> <p style="border:1px red dashed; font-size:18px;">设置字体大小像素</p> <p style="border:1px red dashed; font-size:24px;">设置字体大小像素</p> <p style="border:1px red dashed; font-size:36px;">设置字体大小像素</p> <hr/> <h2>2、字体大小_采用em来设置字体大小</h2> <p style="border:1px red dashed; font-size:1em;">采用em来设置字体大小</p> <p style="border:1px red dashed; font-size:2em;">采用em来设置字体大小</p> <p style="border:1px red dashed; font-size:3em;">采用em来设置字体大小</p> <hr/> <h2>3、字体样式-font-style</h2> <p style="border:1px red dashed; font-size:1em; font-style:normal;">normal-默认值。浏览器显示一个标准的字体样式。</p> <p style="border:1px red dashed; font-size:1em; font-style:italic;">italic-浏览器会显示一个斜体的字体样式。</p> <p style="border:1px red dashed; font-size:1em; font-style:oblique;">oblique-浏览器会显示一个倾斜的字体样式。</p> <hr/> <h2>4、字体粗细-font-weight</h2> <p style="border:1px red dashed; font-weight:bold;">字体粗细</p> <p style="border:1px red dashed; font-weight:200;">字体粗细</p></body></html>