CSS 播客 - 036:文本和排版
文字是网络的核心组成要素之一。
制作网站时,您不一定需要设置文本样式;HTML 实际上具有一些相当合理的默认样式。
不过,文字可能会占据网站的大部分空间,因此有必要添加一些样式来美化网站。通过更改一些基本属性,您可以显著改善用户的阅读体验!
在本单元中,我们将首先介绍一些基本的 CSS 字体属性,例如 font-family
、font-style
、font-weight
和 font-size
。然后,我们将深入介绍影响文本段落的属性,例如 text-indent
和 word-spacing
。最后,介绍一些更高级的主题,例如可变字体和伪元素。
更改字体
使用 font-family
更改文本的字体。
font-family
属性接受以英文逗号分隔的字符串列表,可指代特定字体系列或通用字体系列。特定字体系列为带英文引号的字符串,例如“Helvetica”“EB Garamond”或“Times New Roman”。通用字体系列包括 serif
、sans-serif
和 monospace
等关键字(如需查看完整的选项列表,请访问 MDN)。浏览器将显示提供的列表中第一个可用的字体。
使用 font-family
时,您应该指定至少一个通用字体系列,以防用户的浏览器没有您的首选字体。通常,后备通用字体系列应该与您的首选字体类似:如果使用的是 font-family: "Helvetica"
(Sans Serif 字体系列),则回退应为 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
,映射到阿拉伯语脚本的 right
(从右到左 (RTL) 书写)。它们属于逻辑对齐,如需了解详情,请参阅我们的逻辑属性模块。
使用 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
。点击每个资源上的链接可详细了解其使用方法。
检查您的掌握程度
测试您对网页排版知识的掌握情况
以下哪个关键字可用作 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 基础文本和字体样式设置。