CSS 播客 - 036:文字与排版
文本是网络的核心构建块之一。
制作网站时,您不一定需要为文本设置样式;HTML 实际上具有一些相当合理的默认样式。
不过,文字可能会占据网站的大部分篇幅,因此有必要添加一些样式来美化网站。通过更改一些基本属性,您可以显著改善用户的阅读体验!
在本单元中,我们将从 @font-face
规则开始,此规则允许您导入
自定义字体到您的网页中。这样可以确保您在排版上
而无需考虑用户安装的字体
接下来,我们将介绍基本的 CSS 字体属性,包括
font-family
、font-style
、font-weight
和font-size
。这些基本功能
处理文本以确保样式和可读性的阶段。
我们还会介绍段落专用属性,例如 text-indent
和
word-spacing
,在最后学习可变字体等高级主题
和伪元素,进一步优化您的排版控制。
本系列课程将提供实用示例和提示,帮助您巩固您的 了解和应用这些 CSS 技术。
@font-face
规则
@font-face
CSS at-rule 在网页设计中起着重要作用,可让您指定
并使用自定义字体显示文本。@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 |
网络开放字体格式 | font/woff |
网络开放字体格式 2 | font/woff2 |
@font-face 和 font-family 之间的区别
在 CSS 中,@font-face
和 font-family
经常被混淆,但它们起作用
用途明确。
正如我们之前所讨论的,@font-face
是一条规则,用于定义
所需的资源它会告知浏览器在哪里下载
字体、如何在加载期间显示字体(使用 font-display
属性),以及
指定要下载的字符子集(使用 unicode-range
)。
与之不同的是,font-family
是在 CSS 规则中使用的 CSS 属性,用于将
为某个元素指定特定字体或一系列字体。下方列出的字体
font-family
可以是网络安全字体、系统字体或
@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”无法使用。
更改字体
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 font-family
更改文本的字体。
font-family
属性接受以英文逗号分隔的字符串列表,它们分别引用“特定”或“通用”字体系列。特定字体系列是带引号的字符串,如 "Helvetica"、"EB Garamond" 或 "Times New Roman"。通用字体系列包括 serif
、sans-serif
和 monospace
等关键字(请参阅 MDN 上选项的完整列表)。浏览器将显示所提供列表中的第一个可用字体。
使用 font-family
时,您应指定至少一个通用字体系列,以防用户的浏览器没有您的首选字体。一般情况下,后备通用字体系列应该类似于你的首选字体:如果使用 font-family: "Helvetica"
(一种 Sans Serif 字体系列),则后备应设为 sans-serif
才能匹配。
使用斜体和斜体字体
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 font-style
可设置文本是否应设为斜体。font-style
接受以下关键字之一:normal
、italic
和 oblique
。
将文本设为粗体
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 font-weight
设置“粗体”文本。此属性接受关键字值(normal
、bold
)、相对关键字值(lighter
、bolder
)和数值(100
到 900
)。
关键字 normal
和 bold
分别相当于数值 400
和 700
。
关键字 lighter
和 bolder
是相对于父元素计算的。请参阅 MDN 的相对权重含义,查看显示此值计算方式的实用图表。
更改文字大小
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 font-size
控制文本元素的大小。此属性接受长度值、百分比和少量关键字值。
除了长度和百分比值之外,font-size
还接受一些绝对关键字值(xx-small
、x-small
、small
、medium
、large
、x-large
、xx-large
)和几个相对关键字值(smaller
、larger
)。相对值是相对于父元素的 font-size
而言的。
更改各行之间的间距
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 line-height
指定元素中每行的高度。此属性接受数字、长度、百分比或关键字 normal
。一般情况下,建议使用数字而非长度或百分比,以免出现继承问题。
更改字符之间的间距
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 letter-spacing
可控制文本中字符之间的水平间距。此属性接受长度值,例如 em
、px
和 rem
。
请注意,指定的值会增加字符之间的自然间距。在下面的演示中,尝试选择一个字母,以查看其信箱大小及其随 letter-spacing
的变化情况。
更改字词之间的间距
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 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
文章。
更改文字大小写
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 text-transform
可以修改文本的大小写,而无需更改底层 HTML。此属性接受以下关键字值:uppercase
、lowercase
和 capitalize
。
为文本添加下划线、上划线和插入行
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 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
属性是上述所有属性的简写形式。
添加文本缩进
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 text-indent
可对文本块进行缩进。此属性采用长度(例如 10px
、2em
)或所包含块宽度的百分比。
处理溢出或隐藏的内容
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 text-overflow
指定隐藏内容的表示方式。有两个选项:clip
(默认),用于在溢出点截断文本;和 ellipsis
,它会在溢出点显示一个省略号 (...)。
控制空格
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
white-space
属性用于指定应如何处理元素中的空格。有关详情,请参阅有关 MDN 的 white-space
文章。
white-space: pre
可用于渲染 ASCII 图片或精心缩进的代码块。
控制断字方式
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 word-break
更改单词的“破损”形式何时会超出预期默认情况下,浏览器不会拆分单词。对 word-break
使用关键字值 break-all
会指示浏览器在必要时在单个字符处拆分字词。
更改文本对齐方式
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 text-align
指定块或表格单元格元素中文本的水平对齐方式。此属性接受关键字值 left
、right
、start
、end
、center
、justify
和 match-parent
。
值 left
和 right
分别会将文本与代码块的左侧和右侧对齐。
使用 start
和 end
表示当前书写模式下文本行的开始和结束位置。因此,start
映射到英语的 left
,以及从右到左 (RTL) 的阿拉伯脚本中的 right
。它们是逻辑对齐,如需了解详情,请参阅我们的逻辑属性模块。
使用 center
将文本与文本块的中心对齐。
justify
的值会自动整理文本并更改字词间距,使文本与文本块的左右边缘对齐。
更改文本方向
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 direction
设置文本方向:ltr
(默认为从左到右)或 rtl
(从右到左)。有些语言(如阿拉伯语、希伯来语或波斯语)是从右向左书写的,因此应使用 direction: rtl
。对于英语和所有其他从左到右书写的语言,请使用 direction: ltr
。
更改文字流动
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 writing-mode
更改文本的流动和排列方式。默认值为 horizontal-tb
,但您也可以为想要水平显示的文本将 writing-mode
设置为 vertical-lr
或 vertical-rl
。
更改文本方向
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 text-orientation
可指定文本中字符的方向。此属性的有效值包括 mixed
和 upright
。仅当 writing-mode
设置为 horizontal-tb
以外的值时,此属性才相关。
为文本添加阴影
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 text-shadow
为文本添加阴影。此属性需要三种长度(x-offset
、y-offset
和 blur-radius
)和一种颜色。
如需了解详情,请参阅“阴影”单元中的 text-shadow
部分。
可变字体
一般来说,“正常”字体需要导入不同版本的字体(如粗体、斜体或精简字体)的不同文件。可变字体是指在一个文件中包含某种字体的多个不同变体的字体。
<ph type="x-smartling-placeholder">如需了解更多详情,请参阅我们关于变量字体的文章。
伪元素
::first-letter
和 ::first-line
伪元素
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
::first-letter
和 ::first-line
伪元素分别定位到文本元素的第一行和第一行。
::selection
伪元素
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
使用 ::selection
伪元素来更改用户选择文本的外观。
使用此伪元素时,只能使用某些 CSS 属性:color
、background-color
、text-decoration
、text-shadow
、stroke-color
、fill-color
、stroke-width
。
font-variant
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
font-style
,italic
是有效关键字,不适用于 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 基础文本和字体样式设置。