目录
1.font-size：字体大小
案例：通过font-size属性设置字体的大小
1.代码
2.效果
2.font-family:字体的展现形式
案例：使用font-family属性设置字体的风格
1.代码实现
2.效果
3. font-weight:字体的粗细
案例：使用font-weight定义不同粗细的文字
1.代码实现
2.效果
4.font-style:字体风格
案例：使用font-style定义正常，倾斜，斜体，字体风格
1.代码实现
2.效果
5.@font-face
字体下载
1.代码实现
2.实现效果
1.font-size：字体大小
font-size用于设置字体的大小
案例：通过font-size属性设置字体的大小
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体大小设置</title> <style> .myClassStyle{ font-size: 20px; } .myClassTwoStyle{ font-size: 30px; } </style> </head> <body> <!-- 第一段文字 --> <p class="myClassStyle"> 这是第一段文字 </p> <hr size="5" color="red"/> <!-- 第二段文字 --> <p class="myClassTwoStyle"> 这是第二段文字 </p> </body> </html>
2.效果
2.font-family:字体的展现形式
案例：使用font-family属性设置字体的风格
1.代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过font-family设置字体的展现形式</title> <style> #myFontOne{ font-family:"黑体"; } #myFontTwo{ font-family: "华为彩云"; } </style> </head> <body> <p id="myFontOne">这是通过font-family设置微软雅黑字体的展现形式</p> <hr size="5" color="green"> <p id="myFontTwo">这是通过font-family设置华为彩云字体的展现形式</p> </body> </html>
2.效果
3. font-weight:字体的粗细
font-weight用于定义字体的粗细
案例：使用font-weight定义不同粗细的文字
1.代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>font-weight定义字体的粗细</title> </head> <body> <h1 style="font-weight: bold;">这是粗体</h1> <h1 style="font-weight: bolder;">这是更粗体</h1> <h1 style="font-weight: lighter;">这是更细体</h1> <h1 style="font-weight: 100;">这是100 </body> </html>
2.效果
4.font-style:字体风格
font-style属性用于设置斜体，倾斜，或正常字体
- normal: 默认值，正常字体
- italic : 斜体
- oblique : 倾斜字体
注：italic和oblique效果相同，但是oblique是为倾斜的字体变为倾斜的字体
案例：使用font-style定义正常，倾斜，斜体，字体风格
1.代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>font-style定义字体风格</title> <style> .myFontStyle{ /** * italic:斜体 */ font-style: italic; } .myFontNormal{ /** * normal:正常字体 */ font-style: normal; } .myFontObliqueStyle{ /** * oblique:倾斜字体 */ font-style: oblique; } </style> </head> <body> <h1 class="myFontStyle">这是斜体</h1> <h1 class="myFontNormal">这是正常字体</h1> <h1 class="myFontObliqueStyle">这是倾斜字体</h1> </body> </html>
2.效果
5.@font-face
@font-face 用于服务器字体，自定义字体样式
字体下载
:EYESIS__.TTF官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘
注：这个字体是我很久之前在网上找到的，仅供学习，这个字体支持英文，不支持中文
案例：使用@font-face自定义字体
1.代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@font-face自定义字体样式</title> <style> @font-face{ font-family:myFont; src: url("./font-face/EYESIS__.TTF") } .myFontStyle{ font-family: "myFont"; } </style> </head> <body> <h1>this is default font style </h1> <h1 class="myFontStyle">this is div font Style 你好</h1> </body> </html>
2.实现效果
