111 lines
2.7 KiB
Markdown
111 lines
2.7 KiB
Markdown
---
|
||
title: Fonts
|
||
localeTitle: 字体
|
||
---
|
||
## 字体
|
||
|
||
CSS字体属性定义文本的字体系列,重量,大小,变体,行高和样式。
|
||
|
||
### 字体系列
|
||
|
||
只需使用`font-family`属性设置文本的`font-family` 。
|
||
|
||
它适用于_后备_系统,如果您的浏览器不支持第一个字体,它会尝试使用下一个字体,依此类推。如果字体的名称不止一个单词,则必须用引号括起来。
|
||
|
||
```css
|
||
p {
|
||
font-family: "Times New Roman", Times, serif;
|
||
}
|
||
```
|
||
|
||
在上面的例子中,“Times New Roman”是字体,而“serif”是 。通用名称用作后备 如果姓氏不可用,则保留样式的机制。通用名称应始终是字体系列名称列表中的最后一项。通用 姓氏是serif,sans-serif,monospace,cursive,fantasy,system-ui。
|
||
|
||
### 字体样式
|
||
|
||
`font-style`属性可用于指定斜体文本。
|
||
|
||
此属性有3个值:
|
||
|
||
* normal - 正常显示文本
|
||
* 斜体 - 以_斜体显示的_文字
|
||
* 斜 - 文字显示倾斜
|
||
|
||
```css
|
||
.normal {
|
||
font-style: normal;
|
||
}
|
||
|
||
.italic {
|
||
font-style: italic;
|
||
}
|
||
|
||
.oblique {
|
||
font-style: oblique;
|
||
}
|
||
```
|
||
|
||
### 字体大小
|
||
|
||
`font-size`属性设置文本的大小。
|
||
|
||
有不同类型的字体大小值:
|
||
|
||
* `px` (pixels) - 文本的默认大小为`16px`
|
||
* `em` - `1em` =当前字体大小,因此`1em` = `16px` (由W3C推荐)
|
||
* `small` , `medium` , `large` - 称为绝对大小值
|
||
* `%` - 百分比
|
||
|
||
```css
|
||
.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` 。
|
||
|
||
```css
|
||
p {
|
||
font-weight: bold
|
||
}
|
||
```
|
||
|
||
### 字体响应
|
||
|
||
可以使用vw(视口宽度)单位设置文本大小。 这样,文本大小将遵循浏览器窗口的大小。
|
||
|
||
```html
|
||
|
||
<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`属性指定文本是否应以小型大写字体显示(其中所有小写字母都转换为大写字母,而字体大小小于文本中的原始大写字母)。
|
||
|
||
```css
|
||
p.small {
|
||
font-variant: small-caps;
|
||
}
|
||
```
|
||
|
||
#### 更多信息:
|
||
|
||
* [W3学校 - CSS字体](https://www.w3schools.com/css/css_font.asp)
|
||
* [MND - CSS字体](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
|
||
* [CSSFontStack](https://www.cssfontstack.com/) |