CSS字体

terry 2年前 (2023-09-07) 阅读数 211 #CSS

文章标签 CSS3 CSS百科 font

在这篇文章中我将和你一起学习如何在CSS中使用字体。

在网站的早期，您只有几种字体可供选择。

幸运的是，我们并不生活在过去，QAQ，现在您可以将任何字体加载到您的网站上。

多年来，CSS 在字体方面获得了很多不错的选择。

字体属性缩写为某些属性：

font-family
font-weight
font-stretch
font-style
font-size

让我们逐一查看，然后再讨论字体。

然后我们将讨论如何使用@import或@font-face或通过加载带有字体样式的模板来加载自定义字体。

`font-family`

设置元素将使用的字体。

为什么是“家人”？因为我们所知道的字体实际上是由多个签名组成的。它提供了我们需要的所有样式（粗体、斜体、浅色......）。

这是我的 Mac 上的 Font Book 应用程序的示例 - Fira Code 字体系列中有一些专用字体：

此属性允许您选择特定字体，例如：

body {
  font-family: Helvetica;
}

您可以设置多个值，因此如果由于某种原因无法使用第一个选项（例如，在计算机上找不到该字体或下载字体时网络连接失败），则会使用第二个选项：

body {
  font-family: Helvetica, Arial;
}

到目前为止，我已经使用了一些特定的字体，我们称之为网络安全字体，因为它们预装在不同的操作系统中。

我们将它们分为衬线字体、无衬线字体和等宽字体。

衬线 – 乔治亚 – 帕拉蒂诺 – 泰晤士新罗马 – 泰晤士

Sans-Serif – Arial – Helvetica – Verdana –Geneva – Tahoma – Lucida Grande – Impact – Trebuchet MS – Arial Black

Monospace – Courier 新 – Courier – Lucida 控制台 – 摩纳哥

您可以使用所有这些属性作为字体系列属性，但不能保证它们存在于每个系统上。还有其他人也得到了不同程度的支持。

您也可以使用通用名称：

Sans serif 字体：无连接的字体

衬线字体：组合字体

monospace 是一种特别适合代码

的字体

草书书写用于模拟手写

这个名字说明了一切

sans-serif
serif
monospace
cursive
fantasy

这些通常用在字体系列定义的末尾，以在不包含其他应用程序的情况下提供后备值：

body {
  font-family: Helvetica, Arial, sans-serif;
}

`font-weight`

此属性设置字体宽度。您可以使用这些预定义值：

正常
粗体
较粗（相对于父级）
较轻（相对于父级）

或使用数值

100
200
300
400，对应normal
500
600
700，对应bold
800
900

100是最浅的字体，900是最醒目的字体。

其中一些值可能无法映射到字体，因为它们必须在字体系列中提供。当缺少数字时，CSS 将其设置为与前一个数字一样粗体，因此可以有指向相同字体的数字。

`font-stretch`

允许选择窄字体或宽字体（如果有）。

这一点很重要：字体必须配备不同的面。

允许的值，从窄到宽：

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

`font-style`

允许您使用斜体样式字体：

p {
  font-style: italic;
}

此功能还允许设置为斜角和正常。

`font-size`

该属性用于确定字体大小。

您可以传递两个值：

长度值，例如 px、em、rem 等或百分比
具有预定义值的关键字

在第二种情况下，您可以使用的值是：

xx-small
x-small
small
medium
large
（相对于父元素）
用途：
```
p {
  font-size: 20px;
}

li {
  font-size: medium;
}
```
font-variant

该属性最初用于将文本更改为大写，它只有 3 个有效值：
- normal
- inherit
- small-caps
小写意味着文本在大写字母旁边以“小写”呈现。

font

字体属性允许您在单个字体中使用不同的字体属性，从而减少混乱。

我们至少需要设置2个属性，font-size和font-family，其他是可选的：
```
body {
  font: 20px Helvetica;
}
```
如果我们添加更多属性，它们必须按正确的顺序放置。

顺序如下：
```
font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;
```
案例：
```
body {
  font: italic bold 20px Helvetica;
}

section {
  font: small-caps bold 20px Helvetica;
}
```