在 CSS 中自定义网站文本的 17 种方法（包括示例）

如果您曾经问​​过自己“如何更改 CSS 中的文本？”，那么这篇文章适合您。 在下文中，我们将介绍使用 CSS 标记在网站上自定义文本的多种方法。

为什么这很重要？

因为排版是网页设计的重要组成部分。 就像使用自定义字体一样，在您的网站上设置文本样式以确保它适合您品牌的其余部分的能力至关重要。

值得庆幸的是，CSS 提供了很多样式选项来帮助解决这个问题。 在这篇文章中，我们将介绍所有最重要的和一些鲜为人知的。

通过 CSS 设置文本样式的 17 种不同方法

以下是通过 CSS 属性自定义网页文本的不同方法。 您可以使用浏览器开发工具轻松尝试所有这些。 没错，您甚至不必拥有自己的网站，您可以在任何有文字的网页上试用。

1.字体系列

我们首先要讨论的是font-family属性。 这决定了您的文本将使用哪种字体。

它很容易使用。 以下是上述示例的随附代码。

 #div-one { font-family: Arial; } #div-two { font-family: Courier; } #div-three { font-family: Impact; }

您只需使用 CSS 选择器确定要更改字体的元素，添加font-family属性，并将字体名称作为值包含在内。

值可以是字体系列名称，如Arial和"Open Sans" ，也可以是通用字体声明，如serif或monospace 。 如果您使用后者，浏览器将使用最接近的近似值。

如果值包含空格，例如“ Times New Roman" ，则需要使用双引号，如果不包含空格，例如Tahoma或sans-serif ，则可以省略它们。

创建字体堆栈

在网页设计中，您通常通过给出一个用逗号分隔的字体列表（所谓的字体堆栈）来包含备用字体。

 #div { font-family: "Open Sans", Arial, sans-serif; }

这些是在浏览器没有可用的原始字体的情况下（例如，因为它没有安装在用户计算机上或在网站上丢失）。 然后它移动到列表中的第二个，依此类推，直到找到可以使用的一个。

这样，即使访问者无法使用您想要的字体，您也可以确保您的网站看起来仍然最像您最初的想法。

为此，最后两个备用字体通常是最有可能在任何计算机上可用的网络安全字体，然后是一个通用声明，例如serif或sans-serif 。 您可以在此处找到网络安全字体及其兼容性。

另一种常见的做法是在样式表的开头定义默认字体，方法是将它们分配给body选择器和所有标题，然后为下面的特定元素使用其他字体系列。

 body { font-family: Garamond, "Times New Roman", serif; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", "Helvetica Neue", sans-serif; } .page-title { font-family: Garamond, serif; }

2.字体大小

很明显，使用这个 CSS 属性，您可以自定义文本的大小。

您有两个选择：设置绝对大小（例如在px中）或相对（在em 、 rem或类似中）。

 #div-one { font-size: 20px; } #div-two { font-size: 8em; } #div-three { font-size: 5rem; }

后者现在更常见，因为它对响应式设计和可访问性更有用。

使用em时， 1em等于16px （这是浏览器默认字体大小）。 您可以从那里计算其他字体大小，只需将您想要的像素值除以 16 即可得出em值。 例如，这两个字体大小声明将输出相同的大小：

 #div-one { font-size: 32px; } #div-two { font-size: 2em; }

有时使用em和rem会涉及到更多的数学问题，您可以在此处阅读更多相关信息。

3.字体粗细

使用font-weight来控制字体的粗细。

有几种方法可以做到这一点。 要么使用预先存在的字体粗细指定之一（ thin 、 light 、 normal 、 bold 、 extra-bold等），要么输入粗体值编号（可变字体在1到1000之间，步长为 100 到100之间） 900用于非可变字体）。

 #div-one { font-weight: light; } #div-two { font-weight: 800; } #div-three { font-weight: bolder; }

您还可以使用lighter和bolder的表示您希望与父元素相比将权重增加/减少一步。 但是，这种情况非常罕见。

请注意，为了使用特定的字体粗细，它需要出现在您的站点或用户的机器上（并且以所选字体开头）。 这就是为什么在安装自定义字体时，您可以选择要包含的字体粗细。

如果没有加载权重，浏览器将无法使用它。

4.字体样式

在几乎所有情况下，此 CSS 属性都用于将字体设置为斜体。 它只需要三个值： normal （默认）、 italic和oblique 。

oblique与italic几乎相同，但通过倾斜原始字体来模拟斜体字体。 此外，浏览器支持更差。 以下是如何使用font-style ：

 #div-one { font-style: normal; } #div-two { font-style: italic; } #div-three { font-style: oblique; }

5.字体变体

font-variant只有一个用途：让字体出现在小型大写字母中，这意味着将小写字母转换为较小的大写字母。 听起来不清楚？ 这就是我的意思：

不要问我这个用例，那可能来自互联网的远古时代。 如果您想尝试一下，请按以下步骤操作：

 #div { font-variant: small-caps; }

6.字体

这是一个简写属性，可用于在一个声明中声明font-style 、 font-variant 、 font-weight 、 font-size 、 line-height和font-family 。

 #div { font: italic small-caps 300 40px/200px Impact; }

下面是如何使用它的语法（注意font-size和line-height之间的斜线，如果你想声明两者，这是强制性的）：

 font: font-style font-variant font-weight font-size/line-height font-family;

只有font-size和font-family是必需的，如果没有声明，其余的将回退到默认值。

您还可以使用其他一些值，例如caption 、 icon和small-caption 。 更多关于这里。

7. 颜色

color属性决定了，你猜对了，字体颜色和仅字体颜色（包括任何text-decoration元素）。 许多初学者（包括我）可能认为它还应该确定整个元素的颜色，但为此您必须查看background-color （因为从技术上讲， color为前景着色）。

使用color很简单：

 #div-one { color: #f2db3f; } #div-two { color: #1bf20f; } #div-three { color: #412535; }

您可以通过几种不同的方式定义文本的颜色：

• 使用red 、 pink 、 blue等颜色名称，也可以papayawhip或navajowhite （有大量预定义的 HTML 颜色可供选择）。
• 作为十六进制值，例如#ff0000 。
• RGB 颜色值，例如rgb(255, 0, 0); .

有关更多信息，请查看我们关于如何在 CSS 中定义颜色的广泛教程。

8. 背景色

如果你想更进一步，你也可以使用background-color 。 如上所述，这是控制文本背景颜色的属性。 它通常与color结合使用，以确保文本具有足够的对比度以保持清晰易读。 您可以使用此工具来确保这是真的。

这也是可访问性的一个重要因素。 以下是如何在 CSS 中实现上述目标：

 #div { color: #f2db3f; } #div p { background-color: #000; }

9. 文本转换

通过 CSS 在您的网站上自定义文本的另一种方法是使用text-transform 。 它只有三个用例：使文本全部大写、全部小写或将每个单词的首字母大写。

使用起来也非常简单：

 #div-one { text-transform: uppercase; } #div-two { text-transform: lowercase; } #div-three { text-transform: capitalize; }

text-transform还有另一个值，即full-width 。 它将所有字母转换为放置在固定宽度的正方形内。 这通常仅在使用日语或韩语等亚洲语言的字形时才相关，尤其是与拉丁字母组合时。

10. 文字装饰

这实际上是四个不同属性的简写： text-decoration-line 、 text-decoration-color 、 text-decoration-style和text-decoration-thickness 。

但是，在大多数情况下，您只需单独使用text-decoration 。 不同的属性采用什么样的值，它们的作用是什么？

• text-decoration-line — 您可以使用overline 、 line-through 、 underline和none在文本上方、下方或通过文本创建线条。 none最常用于删除链接的标准下划线。 您还可以组合使用多个值。
• text-decoration-color — 控制线条的颜色。 它采用通常的 CSS 颜色声明。
• text-decoration-style — 改变装饰的风格。 它可以是solid的、 double的、 dotted的、 dashed的、 wavy的和none的。
• text-decoration-thickness — 通过常用值设置线条的粗细，例如px 、 %和em 。 它还需要auto和from-font ，它们使用可能包含在所选字体中的任何值。

如何使用文本装饰

您可以单独使用它们，但如前所述，更常见的是使用速记代替。 这是它的语法：

 text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

只有text-decoration-line的值是必需的，其余是可选的。 要实现上面示例图像中看到的效果，您可以使用下面的代码。

 #div-one { text-decoration: overline; } #div-two { text-decoration: line-through; } #div-three { text-decoration: underline dotted; } #div-four { text-decoration: line-through black 10px; } #div-five { text-decoration: underline wavy 0.1em; } #div-six { text-decoration: none; }

快速提示：使用text-decoration为链接等文本添加下划线的一种常见替代方法是使用border属性。 它提供的好处是您可以控制线条与文本之间的距离，还可以使线条延伸到文本之外。 两者都不能使用text-decoration 。

11.文字阴影

如果您已阅读我们关于 CSS 框阴影的教程，那么text-shadow应该不会对您造成大问题。 基本上，您可以使用它为文本提供阴影，包括控制其方向、颜色和模糊。

 #div-one { text-shadow: -5px 4px black; } #div-two { text-shadow: 0 0 20px #fff; } #div-three { text-shadow: -10px -10px rgba(0, 0, 0, 0.4), -20px -20px rgba(0, 0, 0, 0.3), -30px -30px rgba(0, 0, 0, 0.2), -40px -40px rgba(0, 0, 0, 0.1), -50px -50px rgba(0, 0, 0, 0.05); }

text-shadow最多有四个值：水平偏移量、垂直偏移量、 blur和color 。

 text-shadow: offset-x offset-y blur-radius color;

使用text-shadow时，前两个是必需的，其他是可选的。 请注意，偏移量采用负值向左和向上移动阴影，向右和向下移动正值。

您可以通过在 CSS 中确定尺寸和颜色的常用方法来定义偏移量、 blur和color 。 除了color ，他们最常使用px 。

此外，就像box-shadow一样，您也可以在一个声明中为同一个元素设置多个阴影，只需用逗号分隔它们。

12. 文本对齐

使用 CSS 属性text-align ，您可以自定义网站上文本的水平对齐方式。 它可以是left 、 right 、 center或justify （意味着单词之间的空格会拉伸以使文本适合可用空间）。

这是上图的随附代码：

 #div-one { text-align: left; } #div-two { text-align: right; } #div-three { text-align: center; } #div-four { text-align: justify; }

请注意，根据文本方向（从左到右或从右到左），默认对齐方式为左或右，无需通过 CSS 专门定义它，因为它会自动发生。

与text-align相关的属性是：

• text-align-last — 与 text-align 相同，但只影响元素中的最后一行文本。
• direction / unicode-bidi — 允许您更改文本的方向（例如从右到左）。

13. - 16. 文本间距

您可以使用许多 CSS 属性来更改网站文本中的间距。

线高

这可以改变文本行之间的间距。 它采用通常的 CSS 大小和长度单位，但最常见的是简单地定义为没有单位的乘数。

 div { line-height: 2; }

当你这样做时，行高将只是字体大小和line-height值的乘积。

字间距

此属性使您可以控制单个单词之间的距离（我敢肯定，您永远猜不到）。

从上图中可以看出，它也需要负值来使距离更小。 除此之外，您可以将它与 CSS 中可用的大多数长度和大小单位声明一起使用。

 div { word-spacing: 10px; }

字母间距

这个名字也已经给出了它，你可以用它来增加或减少字母之间的空间。

当然，后者是通过负值和letter-spacing发生的，它也采用通常的单位来声明大小。

 div { letter-spacing: 12px; }

文本缩进

此 CSS 属性使您能够缩进应用它的元素中的第一行文本。

这是它在标记中的样子：

 div p { text-indent: 25%; }

您可以使用通常的宽度和长度单位以及百分比。 负值还允许您将文本向左移动。

17. 通过 CSS 自定义文本的其他方法

除了我们已经介绍的内容之外，还有其他方法可以在 CSS 中定位文本。 为此，了解 HTML 类和 id、自定义属性以及::first-letter或::first-word等伪元素是有意义的。 虽然这有点超出了本文的范围，但请务必查看链接的教程。

还有更多的 CSS 属性可以让您处理文本并真正深入了解细节。 如果你想变得非常书呆子，你可能想研究一下word-break 、 hyphen或font-kerning之类的东西。

简而言之，CSS 中的文本自定义

CSS 提供了许多方法来自定义您网站上的文本。 与自定义字体一起，它可以让您的页面副本看起来完全符合您的要求。

上面，我们已经介绍了最重要的 CSS 属性，以便您进行彻底的更改。 虽然还有更多，但这些是您需要的核心。

你知道任何其他有用的 CSS 属性可以用来自定义网站上的文本吗？ 如果是这样，请在评论中告诉我们！