css设置文本样式属性(5个案例+代码实现+效果图)

惜.己

已于 2024-10-02 23:24:14 修改

阅读量360

点赞数 16

分类专栏：前端html+css知识梳理文章标签： css 前端 html html5 vscode

于 2024-10-02 12:26:30 首次发布

本文链接：https://blog.csdn.net/2301_76862031/article/details/142679667

版权

前端html+css知识梳理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目录

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>