css Font Style (Font Style) is one of the indispensable style attributes in web pages. With font style, our web pages can become more beautiful, so the font style attribute has become a must for every designer. knowledge.
Set the font name attribute (font-family)
Select which font to use in this attribute setting page. Commonly used fonts are: Simsun , Arial, Verdana, Helvetica, sans-serif, etc., definition method:
.ziti {font-family: Simsun,Arial,Verdana;}
Three consecutive definitions here If there is no first font in the user's font, the second font will be used, and so on. If there are no fonts set in the CSS, the default value in the browser will be used.
Set the font size attribute (font-size)
font-size can set the font size on the page. There are three commonly used units: em, px, and pt.
A brief introduction to these three length units:
px, relative length unit. Pixel.
em, relative length unit. The font size relative to the text within the current object.
pt, absolute length unit. Point.
The most commonly used one is px. The font setting method is as follows:
.ziti {font-size:12px;}
Set font style attribute (font-style)
Font style is an attribute that sets whether the font is italic or not. There are three values in total:
normal, italic , oblique and normal are the default values, italic and oblique are displayed in italics. Example:
.ziti {font-style:italic;}
##Set the font thickness (thickness) attribute (font-weight)
The thickness (thickness) of the font has only two attributes, because it There are only two types: bold and non-bold. Its values are normal and bold, and normal is the default value. Example:
.ziti {font-weight:bold;}
Set font variable attributes (font-variant)
font-variant is only for English letters and has no effect on Chinese characters. It defines that the font is displayed in small capital letters. Small capital letters can be understood as small capital letters. Although they are uppercase letters, their text size is the same as that of lowercase letters, which is smaller than that of directly input uppercase letters.
font-variant has two values, normal and small-caps. normal is the default value, which is the normal font. small-caps converts lowercase letters into uppercase letters. Example:
.ziti {font-variant:small-caps;}
## The comprehensive writing method of font attributes (font)
font is a shortcut method that can comprehensively define the above five attributes in font attributes. It can use one line to define the font attribute. The writing order is: font -style font-variant font-weight font-size font-family. Example:
.ziti {font:italic normal bold 18px arial;} If an attribute has a default value, you can omit it and the system will automatically parse it as the default value.
Font color (color)
The color of the font belongs to the content in the CSS text attribute, it is not like the font For attributes, you need to add font before color, and only color can be defined.
.ziti {font:italic normal bold 18px arial;color:red;}
##Use em to set font size
To avoid the problem of being unable to resize text in Internet Explorer, many developers use em units instead of pixels.
em size units are recommended by W3C.
1em is equal to the current font size. The default text size in browsers is 16px.
Therefore, the default size of 1em is 16px. You can convert pixels to em through the following formula: px/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */
try it
In the above example, the text size of em is the same as the pixels in the previous example. However, if you use em units, the text can be resized in all browsers.
Unfortunately, it's still an IE problem. When you resize text, it will appear larger or smaller than normal.
You can also use percentages to adjust font size: body {font-size:100%;}
##Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋体",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).</p>
<p id="pall">定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).</p>
<p id="p2">字体属性演示</p>
</body>
</html>
Next Section
