文字相关的样式

最新推荐文章于 2023-09-13 07:52:02 发布

劳码识途

最新推荐文章于 2023-09-13 07:52:02 发布

阅读量608

点赞数 1

分类专栏： CSS学习文章标签：前端 javascript html css3

本文链接：https://blog.csdn.net/weixin_42157705/article/details/125650601

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

《文字相关的样式》源站链接，阅读体验更佳~
文字是构成网页的关键，是信息的主要载体之一，在指定文字样式的时候要充分考虑文字的功能。如果是正文，则通常不建议添加太多花哨的样式，否则很有可能华而不实，反而影响阅读，这个时候样式就会成为信息噪音。反之，如果是有特殊功能的文字，如标题、连接、帮助信息…则建议是当添加标题以起到突出信息的作用，在视觉上与其他内容区别开来。

中文环境中的文字通常不会注意自动断行和断词的样式，这是有语言的差异所导致的。所以在设置文字样式的时候也要尽可能考虑到语言差异导致的样式差异。

text-indent 首行缩进

默认值：0
作用于：block元素
百分比基于：容器的宽度
默认继承：是
值集：<长度>/<百分比>

我们阅读的很多文章中，每一段的开始都会缩进两个字符。在没有这个属性之前，我们想要做到首行缩进，只能采用一些“不自然”的方法，比如加$nbsp;，或者是加透明图片等。但是当CSS有了这个属性之后，想要实现首行缩进就容易多了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首行缩进</title>
    <style>
        p {
            background: #ddd;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<p>
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。<br>
    这些树将一片荷塘重重围住;<br>
    只在小路一旁，漏着几段空隙，像是特为月光留下的。<br>
    树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。<br>
    树梢上隐隐约约的是一带远山，只有些大意罢了。<br>
    树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。<br>
    这时候最热闹的，要数树上的蝉声与水里的蛙声;<br>
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

text-align 文字水平对齐

默认值：CSS3中默认值是start，CSS2.1中取决于文字的书写方向。start还处于试验阶段，通常文字的书写方向都是从左到右，那么大多数情况下start和left是等价的；
作用于：block元素
默认继承：是
值集：start、end、left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)、match-parent

CSS中的文字对齐方式与我们在文字编写软件中经常用到的文字对齐方式具有相同的语义，都是用于干预文字流动方向的。常见的有：左对齐、居中对齐、右对齐和两端对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字对齐</title>
    <style>
        p {
            background: #ddd
        }
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="left">
        荷塘的四面，远远近近，高高低低都是树，而杨柳最多。<br>
        这些树将一片荷塘重重围住;<br>
        只在小路一旁，漏着几段空隙，像是特为月光留下的。<br>
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。<br>
        树梢上隐隐约约的是一带远山，只有些大意罢了。<br>
        树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。<br>
        这时候最热闹的，要数树上的蝉声与水里的蛙声;<br>
        但热闹是它们的，我什么也没有。
    </p>
    <p class="right">
        荷塘的四面，远远近近，高高低低都是树，而杨柳最多。<br>
        这些树将一片荷塘重重围住;<br>
        只在小路一旁，漏着几段空隙，像是特为月光留下的。<br>
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。<br>
        树梢上隐隐约约的是一带远山，只有些大意罢了。<br>
        树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。<br>
        这时候最热闹的，要数树上的蝉声与水里的蛙声;<br>
        但热闹是它们的，我什么也没有。
    </p>
    <p class="center">
        荷塘的四面，远远近近，高高低低都是树，而杨柳最多。<br>
        这些树将一片荷塘重重围住;<br>
        只在小路一旁，漏着几段空隙，像是特为月光留下的。<br>
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。<br>
        树梢上隐隐约约的是一带远山，只有些大意罢了。<br>
        树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。<br>
        这时候最热闹的，要数树上的蝉声与水里的蛙声;<br>
        但热闹是它们的，我什么也没有。
    </p>
    <p class="justify">
        荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
        这些树将一片荷塘重重围住;
        只在小路一旁，漏着几段空隙，像是特为月光留下的。
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
        树梢上隐隐约约的是一带远山，只有些大意罢了。
        树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
        这时候最热闹的，要数树上的蝉声与水里的蛙声;
        但热闹是它们的，我什么也没有。
        <span style="display: inline-block; width: 100%"></span>
    </p>
</body>
</html>

justify不处理首行、被中断的行和尾行

justify对应的文字对齐方式是两端对齐，**但是需要注意的是，justify不会处理首行、被中断的行(一般是被br标签强制换行或者是被包裹在inline-block元素中的行)以及末尾的行。**所以，在上述的示例代码的两对对齐的自然段中我没有使用br标签，并且在最末尾加入一个inline-block的span元素来加上一行，让最后一行文字不是末尾，这样我们才看到了两端对齐的效果。

line-height 行高

line-height的基本特点如下所示：

默认值：normal
作用于：所有的元素
默认继承：是
值集：<数字>

vertical-align 文字垂直对齐

vertical-align用于指定行内元素的垂直对齐方向，其基本属性如下所示。

默认值：baseline
作用于：行内元素和表格单元格
默认继承：是
值集：baseline、top、text-top、middle、text-bottom、bottom、sub、super

在这里，我们不对line-height和vertical-align属性进行展开的介绍，下一篇文章会专门来介绍这两个属性。

letter-space 字符间距

letter-space用于调整字符之间的间距，它的基本性质如下所示：

默认值：normal
作用于：所有元素
默认继承：是
值集：normal、<长度>

letter-space的默认值是normal，也就是0，如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p style="letter-spacing: normal">
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。<br>
    这些树将一片荷塘重重围住;<br>
    只在小路一旁，漏着几段空隙，像是特为月光留下的。<br>
    树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。<br>
    树梢上隐隐约约的是一带远山，只有些大意罢了。<br>
    树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。<br>
    这时候最热闹的，要数树上的蝉声与水里的蛙声;<br>
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

也可以为letter-space指定一个正的长度值，比如我们把上面代码的第8行改为：<p style="letter-spacing: 10px">，渲染结果如下所示：

如图所示，可以看到文字变得稀疏了。

也可以指定负的长度值，只不过这个时候文字会黏在一起，比如我们把上面代码的第8行改为<p style="letter-spacing: -5px">，渲染结果如下方所示：

word-space 词间距

word-space用于指定词与词之间的间距，它的基本性质如下所示：

作用于：所有元素
默认继承：是
值集：normal、<长度>、<百分比>

word-space 对中文而言没有意义

需要特别注意的是，向中文这样的语言，词语在字面上是没有任何明确的划分的，比如‘我是劳码’，每一个词之间是没有任何分隔符的，然而，在英文中就不是这样了，例如‘I am laomst’，这句话很明显被分成了三个部分。

word-space在中文或词语之间没有任何分割符的语言中是没有意义的。

由于word-space的特殊性，我们这里就不举例了。

text-decoration 文字装饰

text-decoration 用于装饰文字本身，将其与周围的文字区别开来，其基本性质如下所示：

默认值
- text-decoration-color: currentcolor
- text-decoration-style: solid
- text-decoration-line: none
作用于：所有元素
默认继承：否

text-decoration可以展开为text-decoration-line、text-decoration-color、text-decoration-style和text-decoration-thickness。

关于text-decoration，我们最常见的就是<a>元素的下划线，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="#">我是一个超链接，我有下划线</a>
</body>
</html>

由于text-decoration可以拆分为多个子属性，我们针对几个最常用的子属性来进行一下说明

text-decoration-line

这个子属性用于指定装饰文字的线条，值集为none、underline(下划线)、overline(上划线)、line-though(删除线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p style="text-decoration-line: underline">我有下划线</p>
<p style="text-decoration-line: overline">我有上划线</p>
<p style="text-decoration-line: line-through">我有删除线</p>
<p>我身上没有线</p>
</body>
</html>

text-decoration-color

这个属性用于指定文本装饰线的颜色，在不指定的情况下，文本装饰线的颜色将和文字的颜色保持一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p style="text-decoration-line: line-through; text-decoration-color: red">我有红色的删除线</p>
</body>
</html>

text-decoration-style

text-decoration-style为装饰线指定风格

值集：solid(实线)、double(双实线)、dotted(点线)、dashed(虚线)、wavy(波浪线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            text-decoration-line: underline;
        }
    </style>
</head>
<body>
<p style="text-decoration-style: solid">我有实线下划线</p>
<p style="text-decoration-style: double">我有双实线下划线</p>
<p style="text-decoration-style: dotted">我有点线下划线</p>
<p style="text-decoration-style: dashed">我有虚线下划线</p>
<p style="text-decoration-style: wavy">我有波浪下划线</p>
</body>
</html>

合并写法

我们上面说过，text-decoration-color、text-decoration-line、text-decoration-style都是text-decoration的子属性，我们可以分别写这三个属性，也可以采用合并的写法，如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1 {
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-color: red;
        }
        .c2 {
            text-decoration: red solid underline;
        }
        .c3 {
            text-decoration: underline wavy red;
        }
    </style>
</head>
<body>
<p class="c1">常规写法</p>
<p class="c2">合并写法1</p>
<p class="c3">合并写法2</p>

</body>
</html>
```
上面的两个合并写法中，顺序是不一样的，这是因为text-decoration-color、text-decoration-line、text-decoration-style这三个属性的值集是没有重叠的，浏览器可以根据值集判断出我们的意图。

但是在实际开发中，建议直接使用text-decoration-color、text-decoration-line、text-decoration-style而不是使用合并写法，这样的可读性会更好。

子元素和合并写法

随着我们对CSS了解的深入，我们会发现很多把子属性合并起来写的做法，有的合并写法有明确的顺序要求，这个时候子属性之间的值集一般是有重叠的，所以浏览器需要依赖顺序来判断我们的意图，也有像text-decoration这样各个子属性的值集之间没有重叠的，这个时候合并写法一般不要求固定的顺序。后面我们会有重点地进行介绍。

text-shadow 文字阴影

text-shadow用于为文字添加阴影效果，其基本性质如下所示：

作用于：所有元素
默认继承：是
值：text-shadow的完整值是一个四元组，分别代表：横向偏移、纵向偏移、玉华半径和投影颜色
- 横向偏移：指文字阴影相对文字本身的位置偏移多少。零为不偏移；正数为向右偏移；负数为向左偏移。
- 总想偏移：与横向偏移类似，只不过方向是上下。
- 羽化半径：羽化半径越小，则阴影就越锐利；羽化半径越大，则阴影就越朦胧。
- 阴影颜色：指定阴影的颜色，可以是任意颜色。一般用较深的颜色创造阴影效果，用较浅的颜色创造发光效果。

text-shadow的写法并不是单一的，它支持多种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="text-shadow: 2px 2px 5px #000">常规写法(横向偏移、纵向偏移、羽化半径、投影颜色)</p>
<p style="text-shadow: #000 2px 2px 5px">投影颜色、横向偏移、纵向偏移、羽化半径</p>
<p style="text-shadow: 2px 2px #000">省略羽化半径，羽化半径为0(横向偏移、纵向偏移、投影颜色)</p>
<p style="text-shadow: #000 2px 2px">省略羽化半径，羽化半径为0(投影颜色、横向偏移、纵向偏移)</p>
<p style="text-shadow: 2px 2px">羽化半径为0，投影颜色继承文字颜色(横向偏移、纵向偏移)</p>
</body>
</html>

多层阴影

text-shadow可以指定多层，每一层用逗号隔开，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="text-shadow: 2px 2px black, -2px -2px gray">多层文字阴影</p>
</body>
</html>

white-space 空白字符

所谓空白字符，就是空格、换行符、制表符等这类肉眼看不到，但是却占据文字位置的字符。这些字符在浏览器中如何表现完全取决于white-space，white-space的基本特点如下：

作用于：所有元素
默认继承：是

值集：normal、nowrap、pre、pre-wrap、pre-line

normal

white-space的默认值为normal，其效果如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="white-space: normal">
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
      这些树将一片荷塘重重围住;
    只在小路一旁，漏着几段空隙，像是特为月光留下的。
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
    树梢上隐隐约约的是一带远山，只有些大意罢了。
         树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
    这时候最热闹的，要数树上的蝉声与水里的蛙声;
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

我们发现，无论文字之间有多少个空格和断行，浏览器都只会将他们渲染成一个空格。这是因为西文通常都是用空格来划分词与词之间的边界的，所以这个机制在西文环境中既可以保证浏览器完美渲染，又可以保证通过换行和空格保持代码的简洁易读。但是在不以空格分词(比如中文)的语言环境中，就比较尴尬了。这通常还会造成误解，我的空格去哪里了？现在我们明白我们的空格是被white-space给吞掉了。

nowrap

nowrap用来不断行，除此之外，其他的表现与normal相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="white-space: nowrap">
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
      这些树将一片荷塘重重围住;
    只在小路一旁，漏着几段空隙，像是特为月光留下的。
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
    树梢上隐隐约约的是一带远山，只有些大意罢了。
         树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
    这时候最热闹的，要数树上的蝉声与水里的蛙声;
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

由于nowrap使得文字不会自动断行，这时候我们配合overview-x就可以实现横向滚动的效果

pre

pre用来显示所有的空白符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="white-space: pre">
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
      这些树将一片荷塘重重围住;
    只在小路一旁，漏着几段空隙，像是特为月光留下的。
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
    树梢上隐隐约约的是一带远山，只有些大意罢了。
         树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
    这时候最热闹的，要数树上的蝉声与水里的蛙声;
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

从渲染结果中我们可以看出，pre会忠实地原样显示代码，并且不会自动换行。

我们经常需要用HTML来书写文档，当文档中包含代码的时候，我们通常会用一个<pre>标签来对代码进行包裹，这个时候<pre>标签所起到的作用其实就是white-space: pre

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 </style>
</head>
<body>
<pre>
 <p>
 荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
   这些树将一片荷塘重重围住;
 只在小路一旁，漏着几段空隙，像是特为月光留下的。
     树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
 树梢上隐隐约约的是一带远山，只有些大意罢了。
      树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
 这时候最热闹的，要数树上的蝉声与水里的蛙声;
 但热闹是它们的，我什么也没有。
</p>
</pre>
</body>
</html>

pre-wrap

与pre类似，pre-wrap也会显示所有的空白字符，但是和pre不同的是，当文字总长度大于容器的时候，pre-wrap会自动断行适应容器宽度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="white-space: pre-wrap">
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
      这些树将一片荷塘重重围住;
    只在小路一旁，漏着几段空隙，像是特为月光留下的。
        树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
    树梢上隐隐约约的是一带远山，只有些大意罢了。
         树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
    这时候最热闹的，要数树上的蝉声与水里的蛙声;
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

pre-line

pre-line用来保留换行，其他行为与normal类似：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<p style="white-space: pre-line">
    荷塘的四面，远远近近，高高低低都是树，而杨柳最多。
        这些树将一片荷塘重重围住;
    只在小路一旁，漏着几段空隙，像是特为月光留下的。
    
            树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。
    树梢上隐隐约约的是一带远山，只有些大意罢了。


        树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。
    这时候最热闹的，要数树上的蝉声与水里的蛙声;
    但热闹是它们的，我什么也没有。
</p>
</body>
</html>

word-break 换行和断词

一般来讲，当一行文字过长的时候，浏览器默认会自动断行，以保证所有文字在容器内部正常显示。

但对于一些特殊情况，例如一行文字已经超出了容器，且其中一个词非常长，甚至一个单词的长度可能已经超出了容器的长度，这个时候浏览器应该怎么处理呢？是打断最后一个单词？还是让最后一个单词正常显示呢？

word-break属性就是用来解决当文字总长大于容器宽度的时候应该怎么处理的问题，其基本属性如下所示：

默认值：normal
作用于：所有元素
默认继承：是
值集：normal、break-all、keep-all、break-word

下面我们对每一个值进行一个单独的介绍：

normal

它表示自动断词，交给浏览器来决策：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            word-break: normal;
        }
    </style>
</head>
<body>
<p>
    This is a looooooooooooooooooooooooooooooooong word.
</p>
<p>
    这是一个非非非非非非非非非非非非非非非非非非非非非非非非常长的短语。
</p>
</body>
</html>
```
观察上面的例子会发现一个规律：当一行文字放不下的时候，同样是字符，西文中的一个单词(字母之间没有空格)，浏览器是不会强行将其打断的；而中文的每个字符(中文标点也算中文)都可以被打断而另起一行。

这就是语言文化的差异带来的区别。因为在CJK(中日韩)语系中，一个字其实就是一个词，无关每个字的组合方式。每一个字都有独立且完整的意思。而西文中的字母，其实就相当于中文汉字的笔画，而笔画不应该被随意打断，否则就会引起歧义。

所以，默认的normal通常是最实用的，浏览器会针对语言来判断是否需要断词。

break-all

它表示对所有的溢出强行打断。它会打断任何溢出的词，完全不顾单词的完整性，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            word-break: break-all;
        }
    </style>
</head>
<body>
<p>
    This is a looooooooooooooooooooooooooooooooong word.
</p>
<p>
    这是一个非非非非非非非非非非非非非非非非非非非非非非非非常长的短语。
</p>
</body>
</html>

这时候语言之间的差异就不重要了，对于文字的渲染方式就是一个字符一个字符进行渲染，超出长度就另起一行继续渲染。

keep-all

它表示不区语言，无差别保留溢出词，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            word-break: keep-all;
        }
    </style>
</head>
<body>
<p>
    This is a looooooooooooooooooooooooooooooooong word.
</p>
<p>
    这是一个非非非非非非非非非非非非非非非非非非非非非非非非常长的短语。
</p>
</body>
</html>

这个时候对CJK语系就不是特别友好了，因为CJK语系中字符与字符之间不需要空格，甚至一段文字中一个空白字符都没有，这个时候对于CJK语系的渲染可能就出问题了。

break-word

它会打断溢出词，另起一行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p {
            word-break: break-word;
        }
    </style>
</head>
<body>
<p>
    This is a looooooooooooooooooooooooooooooooong word.
</p>
<p>
    这是一个非非非非非非非非非非非非非非非非非非非非非非非非常长的短语。
</p>
</body>
</html>

break-word是一种比较折中的处理方式，在一些特殊的情况下，比如排版上有要求，或者最终结果需要印刷，采用这种方式可能是比较合适的。

字体

字体可以说是对文本的渲染效果起到了至关重要的作用，在不同场景下，我们可能会选择不同的字体来突出文本的效果，比如在渲染代码的时候，我们通常会选择等宽字体，而且更加倾向于使用手写体，因为手写体对某些字符的区分是比较明显的。

从2009年开始，浏览器开始广泛支持@font-face，即自定义字体。理论上，你可以使用任何一款你想要使用的字体，但是由于中文的特殊性，其组成语言的符号(即汉字)众多，导致字体文件占用的空间非常大，所以在中文环境中我们通常不会使用自定义的字体，而是使用用户字体上自带的字体。

Windows中常用的自带字体有：

中文名称	英文名称
黑体(中易黑体)	SimHei
楷体(中易楷体)	SimKai
宋体(中易宋体)	SimSun
微软雅黑	Microsoft YaHei
微软正黑	Microsoft JhengHei

MacOS中常用的自带字体有：

中文名称	英文名称
华文黑体	STHeiti
华文楷体	STKaiti
华文宋体	STSong
华文仿宋	STFangsong

**字体需要依赖字体文件才能正确显示。**由于客户端或者网络原因，字体文件并不是永久有效的。**当浏览器找不到字体或无法正确加载字体的时候，就会使用备用字体(或默认字体)。**不同的浏览器可能会采用不同的备用字体。这样做的好处是：无论如何都可以看到内容，对于用户来说，这是最重要的。

字体族

在中文环境中，我们见过的最多的字体可能就是宋体了，但实际上，“宋体”是一类字体(Font Family)，而不是一种字体(Font Face)。而确切的字体如“中易宋体”、“华文宋体”和“华文仿宋”，我们称之为“Font Face”，它们都属于宋体字体族。

CSS中定义了五类基本的字体族。

serif

衬线体，通常指笔画前后带有装饰物的字体，如中文中的宋体、西文中的Times。
sans-serif

非衬线体，通常指笔画前后没有装饰物的字体，如中文中的黑体、西文中的Helvetica。
monospace

等宽体，由于每个字符占用的宽度相同，通常用于代码编写及显示。使用等宽字体保证了上下行字符是逐字母对齐的，也就保证了代码的整洁易读。常见的等宽字体有：Menlo、Courire、Consolas等。
cursive

手写体，模拟手写效果，通常用于副标题、引用等需要装饰性效果或者强调手写效果的文字上，常见的手写体有Author、Comic Sans等。
fantasy

幻想体，浏览器会将所有无法分类至衬线体、非衬线体、等宽体和手写体的字体都归类于幻想体。

font-family 为文字指定字体

font-family基本属性如下所示：

默认值：取决于浏览器
作用于：所有元素
默认继承：是
可动画：否
值集：字体族、通用字体族

总结

文字是构成网页的关键，所以掌握文字相关的样式是掌握CSS最基本的一环。

以上就是我对CSS中文字相关样式的基本理解，感谢你耐心读完。本人深知技术水平和表达能力有限，如果文中有什么地方不合理或者你有其他不同的思考和看法，欢迎随时和我进行讨论(laomst@163.com)。

劳码识途

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
文字相关的样式

文字是构成网页的关键，是信息的主要载体之一，在指定文字样式的时候要充分考虑文字的功能。如果是正文，则通常不建议添加太多花哨的样式，否则很有可能华而不实，反而影响阅读，这个时候样式就会成为信息噪音。反之，如果是有特殊功能的文字，如标题、连接、帮助信息......则建议是当添加标题以起到突出信息的作用，在视觉上与其他内容区别开来。...
复制链接

扫一扫