CSS font style
Font style
| Attribute name | meaning | For example |
|---|---|---|
| font-family | Set font type | font-family: "Official script" |
| font-size | Set font size | font-size:12px |
| font-style | Set font style | font-style:italic |
| font-weight | Set the thickness of the font | font-weight:bold |
| font | Set all font properties | font:italic bold 36px "Arial" |
font-family property
.p1{ font-family: "隶书";}
.p2{font-family: "黑体"; }
.p3{ font-family: "Arial Black"; }
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-family: "隶书";}
.p2{
font-family: "黑体"; }
.p3{
font-family: "Arial Black"; }
</style>
<title></title>
</head>
<body>
<h1>不加修饰的一级标题</h1>
<h1 class="p1">一级标题隶书</h1>
<h1 class="p2">一级标题黑体</h1>
<h1 class="p3">一级标题Arial Black</h1>
</body>
</html>
Effect screenshot:
font-size attribute
Unit: px (pixel)
.p1{font-size: 10px; }
.p2{font-size: 20px;}
.p3{font-size: 30px;}
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-size: 10px; }
.p2{
font-size: 20px;}
.p3{
font-size: 30px;}
</style>
<title></title>
</head>
<body>
<h1>这是正常的一级标题</h1>
<h1 class="p1">这是10px的一级标题</h1>
<h1 class="p2">这是20px的一级标题</h1>
<h1 class="p3">这是30px的一级标题</h1>
</body>
</html>
Effect screenshot:
font-style attribute
normal、italic和oblique
.p1{font-style: normal; }
.p2{font-style: italic;}
.p3{font-style: oblique;}
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-style: normal; }
.p2{
font-style: italic;}
.p3{
font-style: oblique;}
</style>
<title></title>
</head>
<body>
<h1>这是正常的一级标题</h1>
<h1 class="p1">这是normal的一级标题</h1>
<h1 class="p2">这是italic的一级标题</h1>
<h1 class="p3">这是oblique的一级标题</h1>
</body>
</html>
Effect screenshot:
font-weight attribute
normal The default value, defines the standard font.
bold Bold font.
.p1{font-weight: normal; }
.p2{font-weight: bold ;}
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font-weight: normal; }
.p2{
font-weight: bold ;}
</style>
<title></title>
</head>
<body>
<p>这是正常的字体</p>
<p class="p1">这是normal的字体</p>
<p class="p2">这是bold的字体</p>
</body>
</html>
Effect screenshot:
font attribute
The order of font attributes: font style→font thickness→font size→font type
.p1{font:oblique bold 12px "楷体"; }
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.p1{
font:oblique bold 12px "楷体"; }
</style>
<title></title>
</head>
<body>
<p>这是正常的字体</p>
<p class="p1">这是font:oblique bold 12px "楷体";的字体</p>
</body>
</html>
Effect screenshot:
Writing is not easy, if it is helpful to you after reading, thank you for your support!
If you are on a computer, you will see "One key triple connection"Are you right, click it right [haha]
Come on!
Work together!
Keafmd