CSS typography 涉及到在网页上控制文本的样式和布局,包括字体、大小、颜色、对齐方式、间距等。这些属性可以通过CSS来调整,以提高网页的可读性和美观性。
font family
我们可以使用font-family
更改文本的字体:
之所以称之为"family", 是因为每种字体都由多种风格组成, 比如
就有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种使用了:
与文字有关的设置
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
更改用户选择文本的外观