跳转到内容

层叠样式表/字体和文本

Add links
来自维基教科书，开放世界中的开放书籍

字体属性

[编辑 | 编辑源代码]

下面将详细介绍这些属性。

font-family

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

以下是 CSS 字体匹配的简化描述。有关完整描述，请参见 CSS1 字体匹配 或 CSS2.1 字体匹配 规范。

font-family 属性的值是按优先级顺序排列的字体列表，用逗号分隔。网页浏览器将尝试使用列表中的第一个字体。如果第一个字体不可用（或如果也指定了 font-variant，则不可用适当的变体），网页浏览器将尝试使用第二个字体，依此类推，直至列表中的最后一个字体。如果列表中的字体都无法匹配，网页浏览器将使用默认字体。这可能是用户选择的字体。

在下面的示例中，网页浏览器将尝试使用 Verdana。如果 Verdana 未安装（或不可用适当的变体，如果也指定了 font-variant），网页浏览器将尝试使用 Helvetica。如果 Helvetica 不可使用，则将尝试使用 Arial。

p { font-family: Verdana, Helvetica, Arial, sans-serif }

由于并非所有网页浏览器和操作系统都提供标准的字体集，因此可能无法匹配任何命名的字体。定义了五个通用字体系列，以允许这种情况发生。网页浏览器将使用最接近的可用字体来替换通用字体。五个通用系列是：serif、sans-serif、monospace、cursive 和 fantasy。

应始终在字体系列列表的末尾使用通用文本系列。否则，您可能会以用户默认的衬线字体结尾，而您想要的是无衬线字体。通用字体始终保证匹配，因此在通用字体之后指定替代字体毫无意义。在字体范围有限的系统上，两个或多个通用字体可能会映射到同一个字体。您可以通过查看下面的示例来检查网页浏览器对通用字体的使用。有五个不同的字体吗？

serif sans-serif monospace cursive fantasy

网页设计师面临的一个持续问题是，他们无法准确指定所需的字体，因为他们不知道用户将安装哪些字体。解决此问题的方法是在字体系列列表中指定每个可能的客户端系统中或多或少等效的字体。有很多有用的参考资料可以确定这种等效性（例如，这里）。

例如，要使用在 Windows 中被称为 Impact 的字体，可以使用以下声明。
font-family: Impact, Charcoal, sans-serif
其中“Impact”是 Windows 名称，“Charcoal”是 MacOS 名称，“sans-serif”是对于没有这两种字体之一的系统的通用回退。


font-style

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

CSS1 和 CSS2.1 为此属性定义了三个值：normal、italic 和 oblique。此属性的初始值为 normal。许多字体系列没有定义字体的单独斜体版本，在这种情况下，当 font-style 设置为 italic 时，将使用倾斜版本。

CSS 规则

#para1 {
  font-style:normal
}

#para2 {
  font-style:oblique
}

#para3 {
  font-style:italic
}

示例 HTML

    <p id="para1">This sentence should be in an upright version of the font.</p>
    <p id="para2">This sentence should be in an oblique version of the font.</p>
    <p id="para3">This sentence should be in an italic version of the font.
      Is it different to the oblique version?
    </p>

示例渲染

此句子应以字体的直立版本显示。

此句子应以字体的倾斜版本显示。

此句子应以字体的斜体版本显示。它与倾斜版本有什么不同吗？

font-variant

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

CSS1 和 CSS2.1 为此属性定义了两个值：normal 和 small-caps。此属性的初始值为 normal。当应用 small-caps 时，小写字母将显示为缩小的 uppercase 字母。uppercase 字母和其他字符保持不变。下面显示了这些值的效用。

CSS 规则

#para1 {
  font-variant:normal
}

#para2 {
  font-variant:small-caps
}

示例 HTML

    <p id="para1">This sentence shows the effect of setting the
      Cascading Style Sheets property <code>font-variant</code>.
      Other characters: 1 2 3 % !
    </p>
    <p id="para2">This sentence shows the effect of setting the
      Cascading Style Sheets property <code>font-variant</code>.
      Other characters: 1 2 3 % !
    </p>

示例渲染

此句子显示了设置层叠样式表属性 font-variant 的效果。其他字符：1 2 3 % !

此句子显示了设置层叠样式表属性 font-variant 的效果。其他字符：1 2 3 % !

font-weight

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

font-weight 属性设置字体的深浅。CSS 目前定义了从最浅的 100 到最深的 900 的九个深浅级别。深浅级别的数量取决于 font-family。一些系列可能定义了所有九个级别，而大多数系列只定义一个或两个级别。normal 值是 400 的同义词，bold 是 700 的同义词。

下面的列表显示了当前系列的不同粗细。

  • 100
  • 200
  • 300
  • 400 或 normal
  • 500
  • 600
  • 700 或 bold
  • 800
  • 900

font-weight 的最后两个可能值为 lighter 和 bolder。当使用这些值时，网页浏览器将尝试从当前系列中选择一个比父元素的字体更浅或更深的字体。

由于大多数字体系列只有一个或两个粗细，因此通常只使用 normal 和 bold 值。

例如，要使 strong 元素为红色而不是大多数网页浏览器使用的粗体，请应用以下规则。

strong {
  font-weight:normal; /* remove the bold defined by the web browser */
  color:red
}

作为另一个示例，您可以使所有超链接变为粗体。

a {
  font-weight:bold
}

示例 HTML

    <p><strong>Note:</strong> in this text
       <a href="glossary#hyperlink">hyperlinks</a> are in boldface.
    </p>

示例渲染

注意： 在这段文本中，超链接 为粗体。

font-size

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

在阅读本节之前，请确保您了解如何在所有用于测试网页的浏览器中更改默认字体大小。

请确保您了解屏幕像素和 CSS 像素之间的区别。参见 CSS 长度和单位。

字体大小是网页设计中比较麻烦的领域之一。网上冲浪者最常见的抱怨是许多网页的字体大小太小。（参见 Jakob Nielsen 的 2005 年网页设计十大错误。）客户购买网站时经常要求字体更小，以便在页面上塞入更多信息。更糟糕的是，大多数用户没有学习如何更改其网页浏览器使用的默认字体大小。（如果您曾经教授过网页浏览器使用课程，更改字体大小和颜色是您可以教授的最重要的事情之一。）另一个问题是网页设计师往往很年轻，视力相对较好。仅仅因为您喜欢阅读默认字体大小的 60% 的文本，并不意味着您的目标受众可以阅读这种大小的文本。

一些用户确实会更改他们的默认字体大小，网页应该尊重他们的选择。理想情况下，页面上的所有重要信息都应该至少与用户的默认字体大小一样大。重要信息包括发布时间、指向网站隐私政策的链接等。小字号应保留用于不重要的文本，例如页面是有效 HTML 的声明、符合 WCAG Double-AA 的声明等，以及通常以较小尺寸呈现的超脚本等效果。

CSS 像素 (px) 或绝对单位 (pt、pc、mm、cm 和 in) 中的长度不尊重用户的偏好。事实上，使用这些单位会阻止用户在发现字体过小或过大时轻松更改字体大小。例如，在 Windows 版 Internet Explorer 中，如果用户希望更改以这些单位中的任何一个给出的字体的尺寸，他们必须从“工具”菜单中选择“Internet 选项...” ，然后单击“常规”选项卡上的“辅助功能...”按钮，并选中“忽略网页上指定的字体大小”框。这并不用户友好。

尊重用户偏好的值是 em 或 ex 中的长度、百分比和关键字值。有七个“绝对”关键字值根据用户的默认字体大小缩放字体，还有两个“相对”关键字值根据父元素缩放字体。“绝对”关键字是

  • xx-small
  • x-small
  • small – IE/win v6 中的用户的默认字体大小 怪癖模式 和 IE/win v5 无论渲染模式如何。
  • medium – 标准模式 中的用户的默认字体大小。
  • large
  • x-large
  • xx-large

这两个相对关键字是 smaller 和 larger。

大多数网页设计师更喜欢使用 em。em、ex 和百分比中的字体大小是相对于父元素的字体大小计算的。1em 等于 100%。以下示例演示了这一点。

#span1 {
  font-size:0.5em;
  color:red
}

#span2 {
  font-size:5em;
  color:green
}

#span3 {
  font-size:0.4em;
  color:magenta
}

示例 HTML

    <p>The <span id="span1">text <span id="span2">size 
      <span id="span3">changes </span></span></span>a lot.</p>

示例渲染

该 文本 大小 改变 很多。

由于 0.5 乘以 5 乘以 0.4 等于 1，因此最后一个 span 中的文本应与父段落中的文本大小相同。

在 Internet Explorer 中使用 em

[编辑 | 编辑源代码]

如果您在使用 Internet Explorer 查看的页面中将 em 用于 font-size，则需要注意 Internet Explorer 的一个怪癖。在 Windows PC 上将下面给出的两个文件保存在同一个目录中，然后使用 Internet Explorer 查看 IE_font_size_bug.htm。（此示例已在 IE/win v5.0、v5.5 和 v6.0 中测试。）

IE_font_size_bug.css 

p {
  font-size:1em
}

IE_font_size_bug.htm 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>IE font size bug</title>
    <link rel="stylesheet" type="text/css" href="IE_font_size_bug.css">
  </head>
  <body>
    <p>Internet Explorer has a little problem with ems.</p>
  </body>
</html>

将默认字体大小设置为中等、较小和最小。（如果您在工具栏上没有“大小”按钮，请使用“查看”菜单的“文本大小”子菜单。）下表显示了文本的高度。

默认字体大小 大写字母的高度 em 的高度
中等 11 个屏幕像素 16 个屏幕像素
较小 9 个屏幕像素 13 个屏幕像素
最小 6 个屏幕像素 12 个屏幕像素

在六个像素高的字母上，页面上的字母会变得模糊不清，实际上无法阅读。

有一个简单的解决方法。在 IE_font_size_bug.css 中添加一个额外的规则，如下所示

body {
  font-size:100% /* Keeps IE happy when the user sets the default size to 'smallest'. */
}

p {
  font-size:1em
}

理论上，将 font-size 设置为 100% 应该不会有任何改变。但是，如果您使用新的样式表查看页面，您会发现“最小”文本的大小已更改。

默认字体大小 大写字母的高度 em 的高度
中等 11 个屏幕像素 16 个屏幕像素
较小 9 个屏幕像素 13 个屏幕像素
最小 9 个屏幕像素 12 个屏幕像素

九个像素高的字母非常易读，特别是如果您视力良好和/或使用大型显示器。

始终将 body 的 font-size 设置为百分比以解决此怪癖是一个好主意。将评论解释此字体大小声明存在的原因也是一个好主意，这样当其他人接管您的样式表的责任时，就不会删除一个明显多余的规则。

嵌套问题

[编辑 | 编辑源代码]

当您使用类型选择器设置 font-size 属性时，使用 em 或百分比可能会遇到问题。在下面的示例中，每个嵌套的 div 元素都匹配选择器，因此文本的大小每次都会减半。最里面的分区中的文本是用户默认字体大小的 1/16。您可能很难阅读示例渲染，除非您显着增加默认字体大小。

CSS 规则

body {
  font-size:100% /* Keeps IE happy when the user sets the default size to 'smallest'. */
}

div {
  font-size:0.5em;
  border:1px dotted green;
  padding:1em
}

示例 HTML

    <div>
      This division contains
      <div>
        another division that contains
        <div>
          another division and so on
          <div>
            until the text is tiny.
          </div>
        </div>
      </div>
    </div>

示例渲染

该分区包含

另一个包含

另一个分区，依此类推

直到文本变得很小。

此问题通常出现在列表中，在列表中很容易设置 li 元素的 font-size。当有人在将来添加子列表时，子列表的文本会变得过小或过大，具体取决于缩放因子。解决方案是使用 ID 选择器来定位嵌套组的最外层元素，例如嵌套列表的最外层 ul 元素。

表格和表单的问题

[编辑 | 编辑源代码]

如果您使用表格或表单，您可能会发现需要使用以下规则才能使这些元素中的文本与用户的偏好正确缩放

table, input, select {
  font-size:100%
}

line-height

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

line-height 属性定义相邻行文本基线之间的最小距离。如果需要，距离可能会增加以适应行上的图像等。它表示为字体高度与行间距的比率。字体的的高度定义为基线与大写字母顶部的距离。一些字母可能具有下降字母，这些字母会降到基线以下。在某些字体中，也可能存在升高字母，这些字母会上升到大写字母的顶部以上。

在下面的示例中，每行后面的绿色条带从基线延伸到字体高度。第一行显示大写字母。第二行显示带下降字母的小写字母。第三行显示带有重音的大写字母。

A B C

p q y

É Ñ Ô

line-height 可以作为简单数字、长度或百分比给出。如果作为简单数字或百分比给出，则将其乘以字体高度以确定行之间的间距。下一个示例演示了此段落使用 line-height 的四个不同值时的外观。为了使行间距更容易查看，示例中的字体已放大。

#para1 {
  line-height: 1
}

#para2 {
  line-height: 1.2em
}

#para3 {
  line-height: 160%
}

#para4 {
  line-height: 2
}

line-height = 1 或 100% 或 1em

line-height 可以作为简单数字、长度或百分比给出。如果作为简单数字或百分比给出，则将其乘以字体高度以确定行之间的间距。下一个示例演示了 line-height 的四个不同值。为了使行间距更容易查看，示例中的字体已放大。

line-height = 1.2 或 120% 或 1.2em

line-height 可以作为简单数字、长度或百分比给出。如果作为简单数字或百分比给出，则将其乘以字体高度以确定行之间的间距。下一个示例演示了 line-height 的四个不同值。为了使行间距更容易查看，示例中的字体已放大。

line-height = 1.6 或 160% 或 1.6em

line-height 可以作为简单数字、长度或百分比给出。如果作为简单数字或百分比给出，则将其乘以字体高度以确定行之间的间距。下一个示例演示了 line-height 的四个不同值。为了使行间距更容易查看，示例中的字体已放大。

line-height = 2 或 200% 或 2em

line-height 可以作为简单数字、长度或百分比给出。如果作为简单数字或百分比给出，则将其乘以字体高度以确定行之间的间距。下一个示例演示了 line-height 的四个不同值。为了使行间距更容易查看，示例中的字体已放大。

仔细观察 line-height 为 1 的示例中的下降字母。您可能会注意到至少有一个点，下降字母会接触到下面一行的字母。大多数网页浏览器默认 line-height 为 1.2。许多网页设计师认为 line-height 为 1.6 更有可读性，特别是如果字体大小相对较小。

简写属性

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

font 简写属性可以在单个声明中设置五个独立的字体属性和 line-height 属性。font 有两种方法来设置单个属性，通过指定单个属性的组合，或通过给出选择预定义的单个值集的单个关键字。第二种选择只有在 CSS2.1 中可用。

单个属性的组合

[编辑 | 编辑源代码]

组合单个属性的语法有点复杂。属性以以下顺序给出

  • 无，一个或多个 font-style、font-variant 和 font-weight，以任何顺序排列；
  • 可选地，后跟 font-size；
  • 如果 font-size 存在，它可能后跟斜杠 /，后跟 line-height；
  • 后跟 font-family，它必须存在。

包含所有组件的示例是

p {
  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif
}

请注意，150% 表示字体大小是父元素字体大小的 1.5 倍。然后 /1.4 将行高设置为当前元素字体大小的 1.4 倍。还要注意，字体系列是用逗号分隔的按优先级排序的系列列表。

如果省略了某些属性，则它们将设置为它们的初始值。例如，

p {
  font: monospace
}

等效于

p {
  font-family: monospace;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-size:medium;
  line-height:normal
}

关键字

[编辑 | 编辑源代码]

关键字值引用 web 浏览器用于菜单等项目系统字体。关键字值是

caption ; 用于按钮、下拉列表等的字体。
icon ; 用于标记图标的字体。
menu ; 下拉菜单使用的字体。
message-box ; 对话框使用的字体。
small-caption ; 用于标记小型控件的字体。
status-bar ; 状态栏使用的字体。

关键字值将所有单个属性设置为与相应的系统字体匹配。然后，可以通过其他声明来覆盖单个属性。

示例

ul {
  font:menu; /* Set lists to use a system font. */
  font-style:italic /* Override an individual property. */
}

文本间距

[编辑 | 编辑源代码]

text-align

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

此属性用于对齐文本块。四个可能的值是 left、right、center 和 justify。下面的演示了这些值。

CSS 规则

div {
  width:50% /* Make the column narrower so the alignment is more noticeable. */
}

p {
  border: 1px solid red;
  padding: 1em;
}

#para1 {
  text-align: left;
}

#para2 {
  text-align: right;
}

#para3 {
  text-align: center;
}

#para4 {
  text-align: justify;
}

示例 HTML

    <div>
      <p id="para1">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para2">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para3">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
      <p id="para4">Web designers and web surfers are divided over the relative merits of left versus
        full justification of text. Many state a preference for left justified text despite the
        fact that most print media is fully justified.
      </p>
    </div>

示例渲染

网页设计师和网页冲浪者在文本左对齐与全对齐的相对优点方面存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体都是全对齐的。

网页设计师和网页冲浪者在文本左对齐与全对齐的相对优点方面存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体都是全对齐的。

网页设计师和网页冲浪者在文本左对齐与全对齐的相对优点方面存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体都是全对齐的。

网页设计师和网页冲浪者在文本左对齐与全对齐的相对优点方面存在分歧。许多人表示他们更喜欢左对齐文本，尽管大多数印刷媒体都是全对齐的。

此属性与以下其他属性交互

white-space
如果 text-align 的值为 justify，而 white-space 的值为 pre 或 pre-line，则 web 浏览器必须将 text-align 视为 left（如果当前文本方向是从左到右，这是英语的正常情况），或 right（如果当前文本方向是从右到左）。
letter-spacing
如果将此设置为除 normal 以外的任何值，则 web 浏览器可能只在对齐文本时调整字间距。
word-spacing
如果将此设置为除 normal 以外的任何值，则 web 浏览器必须尝试在对齐文本时遵守指定的 value。

letter-spacing

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

letter-spacing 属性用于增加或减少字母之间的间距。web 浏览器不需要支持减少字母间距，或者可能只允许有限的减少。

normal 值可用于从元素中删除继承的值。如果该值设置为除 normal 以外的任何值，则使用 text-align 对齐文本时，字母之间的间距将不会改变。如果不想让字母间距被对齐改变，但也不想添加任何额外的间距，可以将 letter-spacing 设置为零。

CSS 规则

.increase {
  letter-spacing:0.5em
}

.decrease {
  letter-spacing:-0.05em
}

示例 HTML

    <p class="increase">Letter spacing.</p>
    <p>Letter spacing.</p>
    <p class="decrease">Letter spacing.</p>

示例渲染

字母间距。

字母间距。

字母间距。

word-spacing

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

word-spacing 属性用于增加或减少单词之间的间距。web 浏览器不需要支持减少单词间距，或者可能只允许有限的减少。

normal 值可用于从元素中删除继承的值。

CSS 规则

.increase {
  word-spacing:1em
}

.decrease {
  word-spacing:-0.2em
}

示例 HTML

    <p class="increase">The word spacing can be altered.</p>
    <p>The word spacing can be altered.</p>
    <p class="decrease">The word spacing can be altered.</p>

示例渲染

单词间距可以更改。

单词间距可以更改。

单词间距可以更改。

其他文本属性

[编辑 | 编辑源代码]

text-decoration

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

text-decoration 可以设置为 none 或 underline、overline、line-through 和 blink 的任何组合。许多网页设计师认为使用 blink 是不好的做法。对除超链接之外的任何内容使用下划线也被认为是不好的做法。请考虑下面第二个和第三个例子，它们是不好的做法的例子。

如果你使用 line-through 来表示删除的文本，请考虑使用语义元素，例如 (X)HTML 的 del 元素来替代或与这个属性结合使用。

text-decoration 最常见的用法是更改超链接的外观，从主内容中的链接中删除下划线，同时保留导航菜单中的下划线，反之亦然。

CSS 规则

a {
  text-decoration:none
}

li a {
  text-decoration:underline
}

示例 HTML

    <p>The next chapter is rather boring so all but the most enthusiastic readers
       should skip to <a href="Chapter7.htm">the interesting bit</a>.
    </p>
    <ul>
      <li><a href="Chapter4.htm">Previous</a></li>
      <li><a href="Contents.htm">Contents</a></li>
      <li><a href="Chapter6.htm">Next</a></li>
    </ul>

示例渲染

下一章很无聊，所以除了最热心的读者以外，其他人都应该跳到 有趣的部分。

  • 上一页
  • 目录
  • 下一页

同时使用所有四个值的示例。blink 不被某些浏览器支持，因此你可能不会受到这种影响。

CSS 规则

#overDone {
  text-decoration:underline overline line-through blink
}

示例 HTML

    <p id="overDone">Can you actually read this?</p>

示例渲染

你能真的读懂这些吗？

应用于元素的任何 text-decoration 都将绘制在其所有内容（包括任何子元素）之上，而不管为这些元素设置的 text-decoration 值如何。对子元素指定的任何额外修饰都将应用，以及父元素的修饰。

CSS 规则

.notImportant {
  text-decoration:line-through;
  color:black
}

em {
  text-decoration:none
}

strong {
  text-decoration:underline;
  color:red
}

示例 HTML

    <p class="notImportant">Most of the text in this sentence is not <em>important</em>.</p>
    <p class="notImportant">The last bit of text in this sentence is
      <strong>very important</strong>.
    </p>

示例渲染

这句中的大部分文本并不重要。

这句中的最后一段文本非常重要。

请注意，第二段中的下划线是红色的，这是分配给下划线的 strong 元素的颜色。但是，strong 元素上的删除线是黑色的，因为它是属于父 p 元素的，父 p 元素的颜色设置为黑色。

text-indent

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

text-indent 属性指定块级元素第一行的缩进。使用 margin-left、margin-right、padding-left 或 padding-right 来缩进整个块。缩进可能是负的，但 web 浏览器不需要支持负缩进，或者可能限制负缩进的大小。text-indent 属性是继承的。在下面的示例中，text-indent 应用于包含段落的 div 元素，而不是直接应用于段落本身。

请注意，缩进仅在块级元素的开头应用。由内联元素导致的换行符不会导致块中出现任何额外的缩进。

CSS 规则

p {
  width:50%;       /* Narrow the column so that there are more
                    * lines of text in the example. */
  margin-left:4em /* Apply a margin to the left of all paragraphs
                    * so there is room for the undent example. */
  margin-top:0.5em /* Separate the two halves of the example slightly. */
}

.indented {
  text-indent:2em;
  border:1px solid red /* Put a border around the first half of the example. */
}

.undented {
  text-indent:-2em;
  border:1px solid blue /* Put a border around the second half of the example. */
}

示例 HTML

    <div class="indented">
      <p>This paragraph should have an indent similar to that found in novels.
        However there will still be a vertical gap between the paragraphs because that
        is controlled by the <code>margin</code> property. If you want to recreate a novel-like
        appearance you will need to set both properties.
      </p>
      <p>This paragraph has a line break in it, created with the <code>br</code> element.
        Since this doesn't start a new block level element there is no indent or undent after
        the line break.<br> The line break was immediately before this sentence. You may need
        to adjust the width of your browser window to make the line break obvious.
      </p>
    </div>
    <div class="undented">
      <p>This paragraph should have an undent. This is a more unusual style but it can be useful.
        It is most often used with lists to emphasis the start of a list item either instead of 
        or in conjunction with a bullet.
      </p>
      <p>This paragraph has a line break in it, created with the <code>br</code> element.
        Since this doesn't start a new block level element there is no indent or undent after
        the line break.<br> The line break was immediately before this sentence. You may need
        to adjust the width of your browser window to make the line break obvious.
      </p>
    </div>

示例渲染

本段应该与小说中的缩进类似。但是，段落之间仍然会有垂直间隙，因为这是由 margin 属性控制的。如果你想重新创建类似小说的外观，你需要设置这两个属性。

本段中有一个换行符，是用 br 元素创建的。由于它没有启动新的块级元素，因此换行符之后没有缩进或取消缩进。
换行符就在这句话之前。你可能需要调整浏览器窗口的宽度才能使换行符变得明显。

本段应该有一个取消缩进。这是一种不太常见的风格，但它很有用。它最常与列表一起使用，以强调列表项目的开头，无论是代替还是与项目符号结合使用。

本段中有一个换行符，是用 br 元素创建的。由于它没有启动新的块级元素，因此换行符之后没有缩进或取消缩进。
换行符就在这句话之前。你可能需要调整浏览器窗口的宽度才能使换行符变得明显。

text-transform

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

text-transform 属性有四个值

none
不做任何操作。
大写
将所有小写字母转换为大写字母。其他字符保持不变。
小写
将所有大写字母转换为小写字母。其他字符保持不变。
首字母大写
将每个单词的第一个字母转换为大写字母。其他字符保持不变。特别是单词中其他地方的大写字母将保持大写。

text-transform 的确切效果取决于元素的语言。语言的确定方式取决于正在设置样式的文档。HTML 文档使用 lang 属性指定元素的语言。语言会被子元素继承，除非使用 lang 属性来更改语言。XML 文档以相同的方式使用 xml:lang。XHTML 1.0 文档可以使用 HTML 的 lang 属性或 XML 的 xml:lang 属性。

请注意，将转换后的文本复制到剪贴板可能在不同的浏览器中有所不同。Firefox 将文本复制到剪贴板时，就像它没有被转换一样，而 Chrome 将文本复制到剪贴板时，就像它显示的那样。

CSS 规则

#para1 {
  text-transform:uppercase
}

#para2 {
  text-transform:lowercase
}

#para3 {
  text-transform:capitalize
}

#para4 {
  text-transform:none
}

示例 HTML

    <p id="para1">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para2">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para3">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>
    <p id="para4">this TEXT is NOT iN aNy PaRtIcULaR CaSe.</p>

示例渲染

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

this TEXT is NOT iN aNy PaRtIcULaR CaSe.

将 text-transform 设置为 uppercase 与将 font-variant 设置为 small-caps 的效果进行比较。

CSS 规则

.uppercase {
  text-transform:uppercase
}

.small-caps {
  font-variant:small-caps
}

示例 HTML

    <p>Compare <span class="uppercase">uppercase</span>
      to <span class="small-caps">small-caps</span>.
    </p>

示例渲染

比较 uppercase 与 small-caps。

垂直对齐

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

vertical-align 属性仅适用于 display 值为 inline 或 table-cell 的元素。vertical-align 的行为对于 table-cell 有很大不同，并在关于 层叠样式表/表格 的部分中进行了描述。

不要做的事情

[编辑 | 编辑源代码]

使用 vertical-align 时最常见的错误是将其应用于块级元素，然后想知道为什么它不起作用。以下示例显示了哪里出了问题。CSS 规则

div#outer {
  width:100px;
  height:100px;
  background-color:#00f;
  text-align:center
}

div#inner {
  width:50px;
  height:50px;
  background-color:#f00;
  margin:auto;
  vertical-align:middle /* This is ignored because this is a block level element. */
}

示例 HTML

    <div id="outer">
      <div id="inner">?</div>
    </div>

示例渲染

?

如您所见，红色内部部分与蓝色部分的顶部牢固对齐。

正确用法

[编辑 | 编辑源代码]

vertical-align 的正确用法是调整文本行内文本和嵌入内容的相对位置。要了解 vertical-align，您需要了解 *CSS 行框*。以下示例显示两个块级元素，段落。每个块级段落包含一个内联元素，span。边界和背景应用于内联元素，以便行框可见。

CSS 规则

p {
  width:20em; /* Narrow the paragraphs to ensure that the second paragraph wraps. */
  font-size:120%;
  line-height:2; /* Increase the line height to make the gaps between lines clearer. */
  border:3px solid red;
  padding:2px;
  background-color:#fcc
}

span {
  background-color:#ddd
  border:3px dashed #060
}

示例 HTML

    <p><span>This is a short paragraph.</span></p>
    <p><span>This is a much longer paragraph. The text in the paragraph wraps on to
      more than one line. The CSS rendering engine has to split the text into a number
      of line boxes, one for each line of text.</span>
    </p>

这是一个简短的段落。

这是一个更长的段落。段落中的文本换行到多行。CSS 渲染引擎必须将文本拆分为多个行框，每个文本行一个。

vertical-align 属性调整内联元素相对于同一行框中的其他项目的对齐方式。下一个示例说明了如何使用它来创建上标和下标。

CSS 规则

p {
  font-size:150% /* Enlarge the example so it is easier to see. */
}

span {
  font-size:60% /* Superscripts and subscripts are usualy shrunk by about 60%. */
}

.super {
  vertical-align:super
}

.sub {
  vertical-align:sub
}

示例 HTML

    <p>Text <span>shrunk</span>.</p>
    <p>Text <span class="super">superscript</span>.</p>
    <p>Text <span class="sub">subscript</span>.</p>

示例渲染

Text shrunk.

Text superscript.

Text subscript.

vertical-align 的完整值集为

  • baseline
  • superscript
  • subscript
  • middle
  • text-top
  • text-bottom
  • top
  • bottom

CSS2.1

[编辑 | 编辑源代码]

CSS2.1 还允许 vertical-align 的值为长度或百分比。

white-space

[编辑 | 编辑源代码]

W3C 规范 CSS1 CSS2.1

white-space 属性控制空白的处理方式（普通空格、制表符、换页符和换行符，但不包括不间断空格或其他特殊空格）。在没有 CSS 的情况下，HTML 和 XML 文档的渲染方式是将空白运行替换为单个空白字符。文本块会进行自动换行，以便文本适合容器块的宽度。例如，下面示例 HTML 中的两个段落将以相同的方式呈现。

    <p>A run of whitespace is normally replaced by a single whitespace character,
       e.g. a run of tabs might be replaced by a one normal space.
    </p>
    <p>A   run   
of whitespace is normally replaced by a single whitespace character,
       e.g. a run of tabs might 
be 
replaced 
by a one normal space.
    </p>

示例渲染

空白运行通常被替换为单个空白字符，例如，制表符运行可能被替换为一个普通空格。

white-space 属性有五个值。normal 值指定文本应按 HTML 或 XML 文档的通常方式处理。下表显示了其他值与普通渲染的比较。

值 替换空白运行 将文本换行以适应容器 在源代码中的换行符处开始新行
normal 替换 换行 否
pre 保留 溢出 是
nowrap 替换 溢出 否
pre-wrap CSS2.1 保留 换行 是
pre-line CSS2.1 替换 换行 是

目前，CSS2.1 中添加的两个值 pre-wrap 和 pre-line 并未得到广泛支持。

Windows 版 Internet Explorer 5.0 和 5.5 不支持 pre。IE/win v6.0 仅在 标准模式 中支持 pre。

HTML 的 pre 元素的行为就像应用了以下 CSS 规则一样。

pre {
  white-space:pre;
  font-family:monospace
}

以下示例比较了 normal 和 nowrap。

CSS 规则

p {
  width:15em; /* Make the paragraph narrower so wrapping is more obvious. */
  border:1px solid black; /* Highlight the boundary of the paragraph so overflow is more obvious. */
  background:#cfc
}

#para1 {
  white-space:normal
}

#para2 {
  white-space:nowrap
}

示例 HTML

    <p id="para1">This first sentence.
      The second sentence.
      The third sentence.
    </p>
    <p id="para2">This first sentence.
      The second sentence.
      The third sentence.
    </p>

This first sentence. The second sentence. The third sentence.

This first sentence. The second sentence. The third sentence.

文字阴影

[编辑 | 编辑源代码]

文字阴影是 CSS3 中新增的效果。它的参数与 box-shadow 相同，并支持多个阴影。

  • text-shadow: x-offset y-offset blur/diffusion color [, repeat for multiple];
p {
   text-shadow: 4px 4px 4px black;
   font-size: x-large;
}

Text with Shadow! Bold! Italic! Underline! Strike!

p {
   text-shadow: 2px 2px 1px black;
   font-size: x-large;
}

Text with Sharp Shadow! Bold! Italic! Underline! Strike!

现在让我们尝试多个阴影，请注意您必须不断移动阴影以防止它们全部绘制在同一个地方（除非这就是您想要的  ;) )

p {
   text-shadow: 2px 2px 2px red, 4px 4px 2px blue, 6px 6px 2px green;
   font-size: x-large;
}

Text with Many Shadows! Bold! Italic! Underline! Strike!

立体图像

[编辑 | 编辑源代码]

您可以使用 text-shadow 生成三维（立体）红-青色 立体图像文本。

.anaglyph1 { color: rgba(0,0,0,0); text-shadow: -1px 0px 0px red, 1px 0px 0px aqua; }
.anaglyph2 { color: rgba(0,0,0,0); text-shadow: -2px 0px 0px red, 2px 0px 0px aqua; }
.anaglyph3 { color: rgba(0,0,0,0); text-shadow: -3px 0px 0px red, 3px 0px 0px aqua; }

"color: rgba(0,0,0,0)" 使未阴影的文本透明，因此只有红色 (red) 和青色 (aqua) 阴影可见。请注意，青色阴影在 CSS 中被称为 "aqua"。然后，向左或向右偏移的像素数就是三维深度的量，或者文本看起来漂浮在屏幕前方的距离。您只需使用少量像素。还要知道，对于红-青色立体图像文本，您将无法使用 red 或 aqua 作为超链接或背景颜色。

此文本具有两个像素的红-青色分离。

此文本具有四个像素的红-青色分离。

此文本具有六个像素的红-青色分离。

您需要戴上红-青色 3D 眼镜才能看到 3D 文本。由于大多数网站访问者不会戴 3D 眼镜，因此请确保可以访问非立体图像版本的文本。

网络字体

[编辑 | 编辑源代码]

网络字体是 CSS2 的一项功能，它允许设置一条规则来允许在网页中使用可嵌入字体，使设计人员不必依赖于大多数操作系统附带的字体子集。此功能支持的字体要么是 TrueType (.ttf) 要么是 OpenType (.otf)。网络字体目前仅受 WebKit（Safari、Shiira、Chrome 等）支持。Internet Explorer 仅在 嵌入式 OpenType (.eot) 格式下支持网络字体，而其他浏览器则没有使用这种格式。

示例 CSS

@font-face {
   font-family: WikiFont;
   src: url('wikifont.otf');
}

@font-face {
   font-family: WikiFont;
   font-weight: bold;
   src: url('wikifont-bold.otf');
}

@font-face {
   font-family: WikiFont;
   font-style: italic;
   src: url('wikifont-italic.otf');
}

现在，要使用该字体，我们只需照常进行操作

h1, h2, h3, h4, h5, h6 {
   font-family: WikiFont;
}

然后，该文档中的任何标题都会在支持的浏览器中以我们的示例 "WikiFont" 显示。

检索自 "https://wikibooks.cn/w/index.php?title=Cascading_Style_Sheets/Fonts_and_Text&oldid=4091149"
华夏公益教科书