CSS typography 涉及到在网页上控制文本的样式和布局,包括字体、大小、颜色、对齐方式、间距等。这些属性可以通过CSS来调整,以提高网页的可读性和美观性。
font family
我们可以使用font-family
更改文本的字体:
之所以称之为"family", 是因为每种字体都由多种风格组成, 比如Roboto
就有12种风格之多: 6种font-weight
和2种font-style
(normal和italic)
有一些称之为system font
或web-safe font
的字体,它们被认为存在于绝大多数用户的设备上,不需要下载网络字体, 比如 Arial
, Tahoma
, Times New Roman
。
但有时很难从其中找到风格与自己品牌搭配的字体, 这时我们可以就使用 web font
web font
web font
是我们在CSS中加载的自定义字体,也可以称之为网络字体.
比如,要想使用托管于Google Fonts上的Roboto
字体, 我们需要在html的<head>中嵌入代码:
然后,我们就可以使用该字体了:
有关web font
的更详细用法可以参考下面视频:
@font-face
生产环境中,为了更佳的性能,我们一般会将字体文件(.ttf, .woff等格式)放在项目代码中,此时就需要用到@font-face
其语法如下:
然后就可以在CSS种使用了:
📦 字体文件的格式有哪些,如何选择合适的格式?
字体文件的格式主要有以下几种:
WOFF
(Web Open Font Format): 这是一种为网络优化的字体格式,它提供了更好的压缩和更快的加载速度。WOFF是最广泛支持的字体格式,几乎所有现代浏览器都支持它。WOFF2
: 这是WOFF的后继版本,提供了更高的压缩比和更快的加载速度。WOFF2支持TrueType和OpenType字体的所有特性,包括变体字体、色彩字体和字体集合。TTF
(TrueType Font): 这是一种广泛使用的字体格式,它是由Apple和Microsoft共同开发的。TTF字体文件通常较大,但它们在所有平台上都有很好的兼容性。OTF
(OpenType Font): 这是一种更先进的字体格式,它支持更多的字体特性,如变体字体和色彩字体。OTF字体文件通常比TTF文件小,但它们在某些旧的或不常见的浏览器上可能不受支持。EOT
(Embedded OpenType): 这是一种专为IE浏览器设计的字体格式,它支持更多的字体特性,如变体字体和色彩字体。然而,EOT字体文件通常较大,且只在IE浏览器上受支持。SVG
(Scalable Vector Graphics): 这是一种基于XML的字体格式,它可以在所有平台上呈现清晰的字体。SVG字体文件通常较小,但它们在某些旧的或不常见的浏览器上可能不受支持。
选择合适的字体格式时,应考虑以下因素:
- 兼容性:WOFF和WOFF2是最广泛支持的字体格式,几乎所有现代浏览器都支持它们。如果需要支持旧的或不常见的浏览器,可能需要提供EOT、TTF或SVG格式的字体文件。
- 文件大小:WOFF2提供了最高的压缩比,通常可以提供最快的加载速度。如果字体文件的体积是一个关键问题,应优先考虑使用WOFF2格式。
- 字体特性:如果需要使用变体字体、色彩字体或其他高级字体特性,应选择支持这些特性的字体格式,如OTF或WOFF2。
在使用@font-face
规则时,通常会列出多种字体格式,以确保在不同的浏览器和平台上都能找到一个兼容的字体文件。列表中的字体格式应该按照优先级排序,浏览器会按照列表中的顺序选择第一个它能够使用的字体文件。
与文字有关的设置
font-style
font-style
用于设置字体的样式,包括正常、斜体(italic)和倾斜体(oblique)。这个属性允许你选择 font-family
字体下的斜体或倾斜体样式。
其语法如下:
其中,oblique 可以附加一个可选的角度,范围是 -90deg 到 90deg。如果没有指定角度,默认为 14deg。正值表示向文本末尾倾斜,负值表示向文本开始倾斜。
normal
:选择字体家族的常规字体。italic
:选择斜体。如果当前字体没有可用的斜体版本,会选用倾斜体(oblique)替代。oblique
:选择倾斜体。如果当前字体没有可用的倾斜体版本,会选用斜体(italic)替代。如果指定了角度,浏览器会通过倾斜常规字体来模拟倾斜体。
font-style
属性是基本文本和字体样式的一部分,与 font-family
和 font-weight
一起使用,可以帮助你创建更具个性化和可读性的文本样式
font-weight
font-weight
是 CSS 中用于设置文本的粗细的属性。它允许你控制文本的粗细程度,从最轻(最细)到最重(最粗)。这个属性对于改变文本的视觉重量和强调文本是非常有用的
其语法如下:
其中value
可以是以下几种类型:
关键字值
:如normal
、bold
、bolder
、lighter
。数字值
:从 100 到 900,其中 400 等同于normal
,700 等同于bold
。
关键字
:
normal
:默认值,表示正常粗细。bold
:表示加粗文本。bolder
:表示比父元素更粗的文本。lighter
:表示比父元素更细的文本。
font-size
font-size 用来控制文本元素的大小。此属性接受长度值、百分比和少量关键字值。 除了长度和百分比值之外,font-size 还接受一些绝对关键字值(xx-small、x-small、small、medium、large、x-large、xx-large)和几个相对关键字值(smaller、larger)。相对值是相对于父元素的 font-size。
间距
letter-spacing
: 可控制文字中各个字符之间的横向间距。此属性接受长度值,如 em、px 和 remword-spacing
: 可增加或减少文本中各字词之间的间距长度。此属性接受长度值,如 em、px 和 remline-height
: 指定元素中每行的高度。此属性接受数字、长度、百分比或关键字 normal。一般来说,我们建议使用数字(而不是长度或百分比),以避免继承问题。
text-transform
修改文本的大小写,无需更改底层 HTML。此属性接受以下关键字值:uppercase
、lowercase
和 capitalize
text-align
使用 text-align 指定块或表格单元格元素中文本的水平对齐方式。此属性接受关键字值 left、right、start、end、center、justify 和 match-parent。
text-decoration
使用 text-decoration
可在文本中添加行。下划线最常使用,但可以在文本上方添加线条,也可以在文本的正上方添加下划线!
伪元素
::first-letter
: 定位文本元素的首字母::first-line
定位文本元素的第一行::selection
更改用户选择文本的外观