字体样式
属性名 |
含义 |
举例 |
font-family |
设置字体类型 | font-family:“隶书” |
font-size |
设置字体大小 | font-size:12px |
font-style |
设置字体风格 | font-style:italic |
font-weight |
设置字体的粗细 | font-weight:bold |
| font | 设置所有字体属性 | font:italic bold 36px “宋体” |
font-family属性
.p1{ font-family: "隶书";} .p2{font-family: "黑体"; } .p3{ font-family: "Arial Black"; }
样例代码：
<!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>
效果截图：
font-size属性
单位：px（像素）
.p1{font-size: 10px; } .p2{font-size: 20px;} .p3{font-size: 30px;}
样例代码：
<!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>
效果截图：
font-style属性
normal、italic和oblique
.p1{font-style: normal; } .p2{font-style: italic;} .p3{font-style: oblique;}
样例代码：
<!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>
效果截图：
font-weight属性
normal 默认值，定义标准的字体。
bold 粗体字体。
.p1{font-weight: normal; } .p2{font-weight: bold ;}
样例代码：
<!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>
效果截图：
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
.p1{font:oblique bold 12px "楷体"; }
样例代码：
<!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>
效果截图：
