css设置文本样式属性

目录

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>