跳至主要內容

文字样式

Mr.Hope2019年9月5日...大约 13 分钟CSS

文本

元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者您想强制地手动造成换行的话，您可以使用 <br> 元素。

用于样式文本的 CSS 属性通常可以分为两类:

  • 字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
  • 文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

注意

包含在元素中的文本是作为一个单一的实体。您不能将文字其中一部分选中或添加样式。

如果您要这么做，那么您必须要用适合的元素来包装它们，比如 (<span> 或者 <strong>)。

您也可以使用伪元素，比如 ::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

字体

颜色

color 属性设置选中元素的前景内容的颜色 (通常指文本，也包括诸如 text-decoration 属性设置的文本下方或上方的线)。

color 也可以接受任何合法的 CSS 颜色单位。

字体颜色
<p>我是红色</p>
p {
  color: red;
}

字体种类

要在您的文本上设置一个不同的字体，您可以使用 font-family 属性，这个允许您为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替。

p {
  font-family: arial;
}

网页安全字体

只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的网页安全字体。

字体名称泛型注意
Arialsans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使 Arial 更广泛地可用。
Courier Newmonospace某些操作系统有一个 Courier New 字体的替代(可能较旧的)版本叫 Courier。使用 Courier New 作为 Courier 的首选替代方案，被认为是最佳做法。
Georgiaserif
Times New Romanserif某些操作系统有一个 Times New Roman 字体的替代(可能较旧的)版本叫 Times。使用 Times 作为 Times New Roman 的首选替代方案，被认为是最佳做法。
Trebuchet MSsans-serif您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdanasans-serif

默认字体

CSS 定义了 5 个常用的字体名称: serif, sans-serif, monospace, cursive,和 fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。

五个名称定义如下:

名称定义
serif有衬线的字体 (衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中)
sans-serif没有衬线的字体。
monospace每个字符具有相同宽度的字体，通常用于代码列表。
cursive用于模拟笔迹的字体，具有流动的连接笔画。
fantasy用来装饰的字体

字体栈

由于您无法保证您想在您的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 您可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个 font-family 属性，其值由几个用逗号分离的字体名称组成。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。

字体大小

字体大小可以通过 font-size 属性设置。

常用单位:

  • px (像素): 将像素的值赋予给您的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。
  • em: 1em 等于我们设计的当前元素的父元素上设置的字体大小。如果您有大量设置了不同字体大小的嵌套元素，可能会变得复杂。
  • rem: 这个单位的效果和 em 差不多，除了 1rem 等于 HTML 中的根元素的字体大小(即 <html>) ，而不是父元素。这可以让您更容易计算字体大小。

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素 <html> 开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值: 16px。其他元素也许有默认的大小，比如 <h1> 元素有一个 2em 的默认值，所以它的最终大小值为 32px。

em 的计算
<!-- 文档 font-size 为 16px -->
<article>
  <!-- 如何给出 20px 的字体大小 -->
  <p>段落文字</p>
</article>
article {
  font-size: 1.5em;
}

很容易计算 article 字体大小为 24px，那么 p 的字体大小就要为 0.83333333em

字体样式，字体粗细，文本转换和文本装饰

CSS 提供了 4 种常用的属性来改变文本的样子:

font-style

用来设置文本斜体。可能的值如下:

  • normal: 将文本设置为普通字体 (将存在的斜体关闭)
  • italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
  • oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

font-weight

设置文字的粗体大小。这里有很多值可选 (比如 light, normal, bold, extrabold, black)

  • normal, bold: 普通或者加粗的字体粗细
  • lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
  • 100 – 900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。

text-transform

允许您设置要转换的字体。值包括:

  • none: 防止任何转型。
  • uppercase: 将所有文本转为大写。
  • lowercase: 将所有文本转为小写。
  • capitalize: 转换所有单词让其首字母大写。
  • full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形(如中文，日文，韩文)对齐。

text-decoration

设置/取消字体上的文本装饰，主要使用此方法在设置链接时取消设置链接上的默认下划线。可用值为:

  • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线.
  • overline: 文本上划线
  • line-through: 穿过文本的线，可以创造删除线。

text-decoration 可以一次接受多个值，比如 text-decoration: underline overline。

text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。您可以使用这些属性值的组合来创建有趣的效果，比如 text-decoration: line-through red wavy。

文字阴影

您可以使用 text-shadow 属性为您的文本应用阴影。

text-shadow: 4px 4px 5px red;

4 个属性如下:

  1. 阴影与原始文本的水平偏移: 可以使用大多数的 CSS 长度和尺寸单位, 但是 px 是比较合适的。这个值必须指定。
  2. 阴影与原始文本的垂直偏移: 效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
  3. 模糊半径: 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 长度和尺寸单位.
  4. 阴影的基础颜色: 可以使用大多数的 CSS 颜色单位. 如果没有指定，默认为 black.

提示

正偏移值会向右向下移动阴影，但也可以使用负偏移值来向左向上移动阴影，例如 -1px -1px.

多种阴影

您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本

text-shadow:
  -1px -1px 1px #aaa,
  0px 4px 1px rgba(0, 0, 0, 0.5),
  4px 4px 5px rgba(0, 0, 0, 0.7),
  0px 0px 7px rgba(0, 0, 0, 0.4);

文本布局

文本对齐

text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同:

  • left: 左对齐文本。

  • right: 右对齐文本。

  • center: 居中文字

  • justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。

    您需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果您要使用这个，您也应该考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。

行高

line-height 属性设置文本每行之间的高，可以接受大多数长度与尺寸单位，不过也可以设置一个无单位的值，作为乘数。

通常无单位是比较好的做法。行高由此值乘以 font-size 生成。

当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距)。

line-height: 1.5;

字母和单词间距

letter-spacing 和 word-spacing 属性允许您设置您的文本中的字母与字母之间的间距、或是单词与单词之间的间距，可以接受大多数长度与尺寸单位。

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}

其他属性

字体样式

  • font-variant: 在小型大写字母和普通文本选项之间切换。
  • font-kerning: 开启或关闭字体间距选项。
  • font-feature-settings: 开启或关闭不同的 OpenType 字体特性。
  • font-variant-alternates: 控制给定的自定义字体的替代字形的使用。
  • font-variant-caps: 控制大写字母替代字形的使用。
  • font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。
  • font-variant-ligatures: 控制文本中使用的连写和上下文形式。
  • font-variant-numeric: 控制数字，分式和序标的替代字形的使用。
  • font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。
  • font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。
  • font-stretch: 在给定字体的可选拉伸版本中切换。
  • text-underline-position: 指定下划线的排版位置，通过使用 text-decoration-line 属性的 underline 值。
  • text-rendering: 尝试执行一些文本渲染优化。

文本布局样式

  • text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
  • text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
  • white-space: 定义如何处理元素内部的空白和换行。
  • word-break: 指定是否能在单词内部换行。
  • direction: 定义文本的方向 (这取决于语言，并且通常最好让 HTML 来处理这部分，因为它是和文本内容相关联的。)
  • hyphens: 为支持的语言开启或关闭连字符。
  • line-break: 对东亚语言采用更强或更弱的换行规则。
  • text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。
  • text-orientation: 定义行内文本的方向。
  • word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
  • writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

Font 简写

许多字体的属性也可以通过 font 的简写方式来设置。

您应该按照以下顺序来写:

  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family

如果您想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。另外 font-size 和 line-height 属性之间必须放一个正斜杠。

案例:

font:
  italic normal bold normal 3em/1.5 Helvetica,
  Arial,
  sans-serif;

Web 字体

Web 字体是一种 CSS 特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持 Web 字体的浏览器都可以使用您指定的字体。

首先，您需要尽早声明 @font-face 块，它指定要下载的字体文件:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

之后，您就可以使用 @font-face 中指定的字体种类名称来将您的定制字体应用到您喜欢的任何东西上，如:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

关于网页字体有两件重要的事情要记住:

  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型)的字体,您可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。您不应该在没有适当的授权的情况下偷窃字体。
编辑此页
上次编辑于: 2024/1/25 18:01:12
贡献者: Mr.Hope,Mr.Hope
0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.2