CSS 文字文本

最新推荐文章于 2025-05-13 15:08:39 发布

Lemon Love

最新推荐文章于 2025-05-13 15:08:39 发布

阅读量151

点赞数

本文链接：https://blog.youkuaiyun.com/qq_18873031/article/details/105757221

版权

本文详细介绍了如何使用CSS进行文字和文本的设置，包括文字加粗、倾斜、大小、行高、颜色、对齐方式、首行缩进、修饰、间距等属性，帮助读者掌握网页布局中的文本美化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-weight: bold;
            font-style:italic;
            font-size: 20px;
            font-family: "楷体";
            border:1px solid red;
            line-height: 30px;
            height: 30px;

        }
    </style>
    <!--
        font-weight:文字加粗  bold 加粗  normal 正常
        font-style: 文字倾斜  italic 斜体
        font-size: 文字大小 在chrome中字体默认大小16px
        line-height: 行高 文字在一行里面所占用的位置，当行高的值与容器高度一致时，文字会垂直显示

        多行文字测量行高的方法：
        1、确认文字大小
        2、确认两行文字之间的空隙大小
        3、空隙大小除以2，得出来的值就是每行文字的上下的空隙
            3.1 当行高为奇数时，文字的上方要比下方少一个
            3.2 当行高为偶数时，文字上下空隙值一致
        4、通过辅助线测量多行文字的行高

        复合样式：
        font:italic bold 26px/50px (50px是行高) "楷体";
        注意顺序：
        font: font-style | font-weight | font-size/line-height | font-family;
    -->
</head>
<body>
    <div>
        这里是阿伟和臭叮当的小世界
    </div>
</body>
</html>

文本设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*width: 100px;*/
            border: 1px solid black;
            color: red;
            text-align: left;
            text-indent: 2em;
            text-decoration: underline;
            letter-spacing: 10px;
            word-spacing: 10px;
            white-space: nowrap;
        }
    </style>
    <!--
        color  文字颜色
        text-align  文本对齐方式（显示）方式
                left 默认值    center   right
        text-indent  首行缩进
                em（单位）是根据字体大小来进行计算的   1em=当前字体大小
        text-decoration  文本修饰
                underline 下划线  none 无
        letter-spacing  字母间距
        word-spacing  单词间距（以空格为解析单位）
        white-space  强制不换行
                nowrap 不换行 normal 换行

        ！！！text没有复合样式

        注意：
        1、测量文字大小时，尽量是从上到下测量
        2、字体格式不一样时，空格大小也不一样
        3、空格的大小：字体格式为宋体时，空格大小时当前文字大小的一半
    -->
</head>
<body>
    <div>
        这里是 阿伟和臭叮当 的小世界
    </div>
</body>
</html>