2.7 KiB
2.7 KiB
| title | localeTitle |
|---|---|
| Fonts | 字体 |
字体
CSS字体属性定义文本的字体系列，重量，大小，变体，行高和样式。
字体系列
只需使用font-family属性设置文本的font-family 。
它适用于_后备_系统，如果您的浏览器不支持第一个字体，它会尝试使用下一个字体，依此类推。如果字体的名称不止一个单词，则必须用引号括起来。
p {
font-family: "Times New Roman", Times, serif;
}
在上面的例子中，“Times New Roman”是字体，而“serif”是 。通用名称用作后备 如果姓氏不可用，则保留样式的机制。通用名称应始终是字体系列名称列表中的最后一项。通用 姓氏是serif，sans-serif，monospace，cursive，fantasy，system-ui。
字体样式
font-style属性可用于指定斜体文本。
此属性有3个值：
- normal - 正常显示文本
- 斜体 - 以_斜体显示的_文字
- 斜 - 文字显示倾斜
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
字体大小
font-size属性设置文本的大小。
有不同类型的字体大小值：
px（pixels） - 文本的默认大小为16pxem-1em=当前字体大小，因此1em=16px（由W3C推荐）small，medium，large- 称为绝对大小值%- 百分比
.with-pixels {
font-size: 14px;
}
.with-ems {
font-size: 0.875em;
}
.with-absolute {
font-size: large;
}
.with-percentage {
font-size: 80%;
}
字体重量
font-weight属性指定font-weight的粗细（或粗体）。接受的关键字（ bold ， normal ， bolder ， lighter ）或数字的关键词（ 100 ， 200 ， 300 ， 400等） 400是一样的normal 。
p {
font-weight: bold
}
字体响应
可以使用vw（视口宽度）单位设置文本大小。 这样，文本大小将遵循浏览器窗口的大小。
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
字体变体
font-variant属性指定文本是否应以小型大写字体显示（其中所有小写字母都转换为大写字母，而字体大小小于文本中的原始大写字母）。
p.small {
font-variant: small-caps;
}