CSS Font
CSS font properties define font, bold, size, and text style.
CSS Fonts
In CSS, there are two types of font family names:
Universal font families - font systems with a similar appearance Combination (such as "Serif" or "Monospace")
Specific font family - A specific font family (such as "Times" or "Courier")
Font Family
The font-family property sets the font family of the text.
The font-family property 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: "宋体".
Font style
is mainly used to specify the font style attribute of italic text.
This attribute has three values:
Normal - displays the text normally
Italic - displays the text in italics
Slanted text - displays the text to one side Italic (very similar to italic, but less supported)
Font size
##The font-size property 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, <h1> - <h6> for headings and <p> for paragraphs:
Font size values can be absolute or relative size.
Absolute size:
Set text of a specified size
Does not allow users to change text size in all browsers
Determines the physical size of the output Absolute size is useful
Relative size:
Set the size relative to surrounding elements
Allow the user to change the text size in the browser
If You don't specify a font size, and the default size is the same as a normal text paragraph, which is 16 pixels (16px=1em).
Set font size in pixels
Set text size in pixels, giving you full control over text size:
Use em To set the 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 with the following formula: px/16=em
Use a combination of percentage and EM
in all browsers In the solution, the default font size of the <body> element is set as a percentage.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{font-family:"微软雅黑"}
p.text1{font-style:italic;}
p.text2{font-size:40px;}
p.text3{font-size:1.875em;} /* 30px/16=1.875em */
p.text4{font-size:0.875em;}
</style>
</head>
<body>
<h1>《七步诗》曹植</h1>
<p class="text1">煮豆持做羹,</p>
<p class="text2">漉豉以为汁,</p>
<p class="text3">萁在釜下燃,</p>
<p class="text4">豆在釜中泣,</p>
<p class="text5">本自同根生,</p>
<p class="text6">相煎何太急?</p>
</body>
</html>
Next Section