CSS 播客 - 036:文本和排版
文字是网页的核心构建块之一。
制作网站时,您不一定需要设置文本样式;实际上,HTML 具有一些相当合理的默认样式。
不过,文字很可能占据您网站的大部分内容,因此值得添加一些样式来美化文字。只需更改一些基本属性,您就可以显著改善用户的阅读体验!
在本模块中,我们将从 @font-face
规则开始,该规则可让您将自定义字体导入网页。这样可确保您获得所需的精确排版,而无需考虑用户安装的字体。
接下来,我们将介绍基本的 CSS 字体属性,包括 font-family
、font-style
、font-weight
和 font-size
。这些基础知识为我们提供了操作文本的平台,以便调整文本的样式和可读性。
我们还将介绍段落专用属性(例如 text-indent
和 word-spacing
),最后介绍可变字体和伪元素等高级主题,这些主题可进一步提升您的排版控制能力。
本指南中将提供大量实用示例和提示,以帮助您巩固对这些 CSS 技巧的理解和应用。
@font-face
规则
@font-face
CSS @ 规则在网页设计中发挥着重要作用,可让您指定和使用自定义字体来显示文本。@font-face
的优势在于其多功能性:它允许您从远程服务器或用户设备上安装的字体中获取字体。
语法
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
描述用语
ascent-override
- 自定义升幅指标,影响基准上方的空间。
descent-override
- 调整下降度指标,影响基线下方空间。
font-display
- 根据字体下载状态控制字体的显示行为。
font-family
- 为字体命名,以便在与字体相关的属性中使用。
font-stretch
- 设置可接受的水平缩放,指定为单个值或范围。
font-style
- 定义字体样式,支持倾斜样式的角度范围。
font-weight
- 确定字体的粗细或可用的粗细范围。
font-feature-settings
- 启用对 OpenType 字体功能的访问权限。
font-variation-settings
- 可对可变字体设置进行精细控制。
line-gap-override
- 替换字体的默认行间距。
size-adjust
- 将缩放比例应用于字体轮廓和指标。
src
- 定义字体来源,无论是本地还是远程。
@font-face
规则要求进行此设置。 在src
中同时使用url()
和local()
是一种常见策略,即在本地字体可用时使用本地字体,否则回退到远程字体文件。浏览器会根据声明顺序确定资源优先级,因此local()
通常应位于url()
之前。 unicode-range
- 限制此字体应使用的字符。
说明
@font-face
使设计师能够使用自定义排版,摆脱“网页安全”字体的限制。local()
函数能够在用户设备上搜索字体,从而提供流畅的体验,而这种体验不一定依赖于互联网连接。
字体 MIME 类型
格式 | MIME 类型 |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web 开放字体格式 | font/woff |
Web Open Font Format 2 | font/woff2 |
@font-face 和 font-family 之间的区别
在 CSS 中,@font-face
和 font-family
经常被混淆,但它们有不同的用途。
正如我们所讨论的,@font-face
是一条用于定义您要在 Web 应用中使用的任何自定义字体的规则。它会告知浏览器从何处下载字体、在加载期间如何显示字体(通过 font-display
属性),并指定要下载的字符子集(通过 unicode-range
)。
相比之下,font-family
是 CSS 规则中用于为元素分配特定字体或字体列表的 CSS 属性。font-family
下列出的字体可以是 Web 安全字体、系统字体,也可以是使用 @font-face
定义的自定义字体。
总而言之,@font-face
用于声明字体并为其指定名称,而 font-family
用于将声明的字体应用于 HTML 元素。
下面是同时使用两者的示例:
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
在此示例中,@font-face
定义了“CustomFont”,并告知浏览器在哪里可以找到它。然后,font-family
属性会将其应用于 body 元素,如果“CustomFont”不可用,则使用 Arial 作为后备字体。
更改字体
使用 font-family
更改文本的字体。
font-family
属性接受以英文逗号分隔的字符串列表,这些字符串可以指特定字体系列,也可以指通用字体系列。特定字体系列是带引号的字符串,例如“Helvetica”“EB Garamond”或“Times New Roman”。通用字体系列是 serif
、sans-serif
和 monospace
等关键字(在 MDN 上查找完整的选项列表)。浏览器将显示所提供列表中的第一个可用字体。
使用 font-family
时,您应至少指定一个通用字体系列,以防用户的浏览器没有您首选的字体。一般来说,回退通用字体系列应与您的首选字体类似:如果使用 font-family: "Helvetica"
(一种无衬线字体系列),您的回退应为 sans-serif
,以保持一致。
使用斜体和倾斜字体
使用 font-style
设置文字是否应为斜体。font-style
接受以下关键字之一:normal
、italic
和 oblique
。
将文字设为粗体
使用 font-weight
设置文本的“粗细”。此属性接受关键字值(normal
、bold
)、相对关键字值(lighter
、bolder
)和数值(100
到 900
)。
关键字 normal
和 bold
分别相当于数值 400
和 700
。
关键字 lighter
和 bolder
是相对于父元素计算的。如需查看显示此值如何确定的实用图表,请参阅 MDN 的相对权重的含义。
更改文字大小
使用 font-size
控制文本元素的大小。此属性接受长度值、百分比和少量关键字值。
除了长度值和百分比值之外,font-size
还接受一些绝对关键字值(xx-small
、x-small
、small
、medium
、large
、x-large
、xx-large
)和几个相对关键字值(smaller
、larger
)。相对值相对于父元素的 font-size
。
更改行间距
使用 line-height
可指定元素中每行的高度。此属性接受数字、长度、百分比或关键字 normal
。通常,建议使用数字而非长度或百分比,以避免出现继承问题。
更改字符之间的间距
使用 letter-spacing
可控制文本中字符之间的水平间距。此属性接受长度值,例如 em
、px
和 rem
。
请注意,指定的值会增加字符之间的自然间距。在以下演示中,尝试选择单个字母,查看其信箱的大小以及它如何随 letter-spacing
而变化。
更改字词之间的空格
使用 word-spacing
可增加或减少文本中每个字之间的空格长度。此属性接受长度值,例如 em
、px
和 rem
。请注意,您指定的长度是正常间距之外的额外空间。这意味着 word-spacing: 0
等同于 word-spacing: normal
。
font
简写
您可以使用简写 font
属性一次性设置多个与字体相关的属性。可能的属性列表包括 font-family
、font-size
、font-stretch
、font-style
、font-variant
、font-weight
和 line-height
。
如需详细了解如何对这些属性进行排序,请参阅 MDN 的 font
文章。
为文字添加下划线、上划线和删除线
使用 text-decoration
为文本添加线条。下划线是最常用的,但您也可以在文字上方或中间添加线条!
text-decoration
属性是前面详细介绍的更具体属性的简写形式。
text-decoration-line
属性接受关键字 underline
、overline
和 line-through
。您还可以为多行指定多个关键字。
text-decoration-color
属性用于设置 text-decoration-line
中所有装饰的颜色。
text-decoration-style
属性接受关键字 solid
、double
、dotted
、dashed
和 wavy
。
text-decoration-thickness
属性接受任何长度值,并设置 text-decoration-line
中所有装饰的笔画宽度。
text-decoration
属性是所有上述属性的简写形式。
为文本添加缩进
使用 text-indent
为文本块添加缩进。此属性接受长度(例如 10px
、2em
)或包含块宽度的百分比。
处理溢出或隐藏的内容
使用 text-overflow
指定隐藏内容的表示方式。有两种选项:clip
(默认),用于在溢出点截断文本;以及 ellipsis
,用于在溢出点显示省略号 (…)。
控制空格
white-space
属性用于指定应如何处理元素中的空格。如需了解详情,请参阅 MDN 上关于 white-space
的文章。
white-space: pre
对于呈现 ASCII 图或精心缩进的代码块非常有用。
控制字词的断行方式
使用 word-break
可更改字词在超出行的长度时应如何“断开”。默认情况下,浏览器不会拆分字词。为 word-break
使用关键字值 break-all
将指示浏览器在必要时按单个字符断字。
更改文本对齐方式
使用 text-align
可指定块或表格单元格元素中文字的水平对齐方式。此属性接受关键字值 left
、right
、start
、end
、center
、justify
和 match-parent
。
值 left
和 right
分别将文本对齐到块的左侧和右侧。
使用 start
和 end
表示当前书写模式下文本行的开头和结尾位置。因此,start
在英语中映射到 left
,在从右向左 (RTL) 书写的阿拉伯语脚本中映射到 right
。它们是逻辑对齐方式,如需了解详情,请参阅我们的逻辑属性模块。
使用 center
将文字对齐到代码块的中心。
justify
的值可整理文本并自动更改字间距,使文本与块的左边缘和右边缘对齐。
控制文字换行方式
使用 text-wrap
更改元素内文本的换行方式。
此属性接受的关键字包括 wrap
、nowrap
、balance
和 stable
。默认值为 wrap
,该值通过在正常空格和断字处换行来最大限度地减少溢出。
您可以使用 nowrap
关键字来实现完全相反的效果,防止文本跨行显示,从而避免溢出。
如果您要撰写标题或头条新闻,并希望每行上的文字量相同,请使用 balance
关键字。为了提高性能,浏览器只会将此值应用于包含六行或更少文本的元素。
stable
关键字的作用与 wrap
类似,但旨在与 contenteditable 文本搭配使用。设置 text-wrap: stable
后,在编辑内容的过程中,内容上方的行不会发生移动。
有时,没有明确断点的长字符串可能会导致容器溢出。如需控制此类文本的换行方式,请使用 overflow-wrap
。
您可以为此属性使用 normal
、break-word
和 anywhere
关键字。默认设置为 normal
,除非文本包含空格或自然中断点,否则不会换行。
anywhere
和 break-word
值会在字符串内的任意位置添加断点,以防止溢出。这些关键字的不同之处在于它们对内在或显式 min-content
大小的响应方式。anywhere
关键字可实现所有可能的软断行机会。break-word
值不会,并且会使文本与最长的字词一样长。
更改文字方向
使用 direction
可设置文本方向,即 ltr
(从左到右,默认)或 rtl
(从右到左)。某些语言(例如阿拉伯语、希伯来语或波斯语)是从右到左书写的,因此应使用 direction: rtl
。对于英语和所有其他从左到右的语言,请使用 direction: ltr
。
更改文字方向
使用 writing-mode
更改文本的排版方式。默认值为 horizontal-tb
,但您也可以将 writing-mode
设置为 vertical-lr
或 vertical-rl
,以使文字沿水平方向流动。
更改文字方向
使用 text-orientation
可指定文本中字符的方向。此属性的有效值为 mixed
和 upright
。仅当 writing-mode
设置为 horizontal-tb
以外的其他值时,此属性才相关。
为文字添加阴影
使用 text-shadow
为文字添加阴影。此属性需要三个长度值(x-offset
、y-offset
和 blur-radius
)以及一种颜色。
如需了解详情,请参阅有关阴影的模块的 text-shadow
部分。
可变字体
通常,“常规”字体需要为不同的字形版本(例如粗体、斜体或紧凑型)导入不同的文件。可变字体是指可以在一个文件中包含多种不同字体的字体。
如需了解详情,请参阅我们关于可变字体的文章。
伪元素
::first-letter
和 ::first-line
伪元素
::first-letter
和 ::first-line
伪元素分别定位到文本元素的第一个字母和第一行。
::selection
伪元素
使用 ::selection
伪元素可更改用户所选文本的外观。
使用此伪元素时,只能使用某些 CSS 属性:color
、background-color
、text-decoration
、text-shadow
、stroke-color
、fill-color
、stroke-width
。
font-variant
font-variant
属性是多个 CSS 属性的简写形式,可用于选择字体变体,例如 small-caps
和 slashed-zero
。此简写属性包含的 CSS 属性有 font-variant-alternates
、font-variant-caps
、font-variant-east-asian
、font-variant-ligatures
和 font-variant-numeric
。如需详细了解每项属性的用法,请点击相应链接。
检验您的掌握情况
测试您对网页排版相关知识的掌握情况
以下哪个关键字可用作 font-family
通用回退?
serif
monospace
italic
italic
是 font-style
的有效关键字,而不是 font-family
的有效关键字。sci-fi
fantasy
是 font-family
的有效通用后备。sans-serif
helvetica
"Helvetica"
不是通用关键字,而是指特定的字体系列。哪个语句用于将每个单词的首字母转换为大写?例如,This is a sentence.
➡ This Is A Sentence.
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;
font-style: capitals;
font-variant: capitalize;
判断正误:使用 text-orientation
可将文本左对齐、右对齐或居中对齐。
text-orientation
会更改一行中字母的旋转方向。哪个 CSS 属性可用于更改文本各行之间的间距?
line-spacing
leading
baseline-distance
line-height
资源
- 字体最佳实践一文讨论了导入字体、呈现字体以及在网页上使用字体的其他最佳实践。
- MDN 基本文本和字体样式。