CSS 播客 - 第 36 集:文本和排版
文本是 Web 的核心构建块之一。
制作网站时,您不一定需要设置文本样式;HTML 实际上有一些非常合理的默认样式。
不过,文本很可能构成您网站的大部分内容,因此不妨添加一些样式来美化文本。只需更改几个基本属性,即可显著改善用户的阅读体验!
在本单元中,我们将从 @font-face
规则开始,该规则可让您将自定义字体导入网页。这样可以确保您获得所需的确切排版,而不会受用户安装的字体影响。
接下来,我们将介绍一些重要的 CSS 字体属性,包括 font-family
、font-style
、font-weight
和 font-size
。这些基础知识为调整文本样式和可读性奠定了基础。
在最后介绍一些高级主题(例如,可变字体和伪元素),这些高级主题可以进一步优化排版控制。此外,我们还会介绍段落专用属性(例如 text-indent
和 word-spacing
)。
本课程将提供实用示例和提示,帮助您巩固对这些 CSS 技术的理解并学会加以应用。
@font-face
规则
@font-face
CSS at-rule 在 Web 设计中非常有用,可让您指定和使用自定义字体来显示文本。@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
- 自定义 ascent 指标,影响基准线上方的空间。
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
让设计师可以使用自定义排版,从而摆脱“适合 Web 的”字体的限制。local()
函数在用户设备上搜索字体的功能可以提供不依赖于互联网连接的无缝体验。
字体 MIME 类型
格式 | MIME 类型 |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open Font Format | 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-transform
修改文本的大小写,而无需更改底层 HTML。此属性接受以下关键字值:uppercase
、lowercase
和 capitalize
。
为文本添加下划线、上划线和插入行
使用 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
的值会自动整理文本并更改单词间距,以便文本与块的左侧和右侧对齐。
更改文本方向
使用 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
。请查看各项媒体资源对应的链接,详细了解其使用方式。
检查您的理解情况
测试您对 Web 排版知识的掌握情况
以下哪个关键字可用作 font-family
通用后备关键字?
helvetica
serif
sans-serif
sci-fi
monospace
italic
哪个语句用于将每个字词的首字母转换为大写?例如,This is a sentence.
➡ This Is A Sentence.
text-transform: capitalize;
text-case: capitalize;
font-style: capitals;
font-variant: capitalize;
text-capitalize: true;
判断正误:使用 text-orientation
可将文本左对齐、右对齐或居中对齐。
哪个 CSS 属性可用于更改文本各行之间的间距?
baseline-distance
line-height
leading
line-spacing
资源
- 字体最佳实践介绍了导入字体、渲染字体以及在 Web 上使用字体的其他最佳实践。
- MDN 基本文本和字体样式。