CSS设置元素字体、降级使用字体、引入外部字体

谁借莪１个温暖的怀抱￠ 2024-03-29 16:01 66阅读 0赞

## 设置元素字体 ##

通过`font-family`属性，可以设置元素里面的字体样式。  
font-family 可以把设置多个字体名称。  
![在这里插入图片描述][19c4b576a5c64201aa49d4b0ea54a5e9.png]

## 降级使用字体 ##

几乎所有浏览器都有支持几种通用字体。比如: monospace，serif和sans-serif，当字体不可用，浏览器可以 “降级” 去使用其他字体。  
即：如果浏览器不支持第一个字体，则会尝试下一个。  
如果你想当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：  
![在这里插入图片描述][bd9cecedd23d45a5a848b9a887b6ab6e.png]  
**提示:** 通用字体名字不区分大小写。也不需要使用引号，因为它们是 CSS 关键字。

## 引入外部字体 ##

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。  
我们可以通过在 CSS 里面设置字体的 URL 来引用。  
例如，我们需要引入Lobster字体，首先需要将下代码段放到style标签之前。  
![在这里插入图片描述][a2cfe44145d343efa39633f6f4dbceff.png]  
然后就可以设置font-family属性为Lobster，来使用Lobster字体。  
![在这里插入图片描述][4538a406a03f44afbbc20fe20e880639.png]  
GENERIC\_NAME是可选的，如果浏览器不支持第一个字体，则会尝试下一个。  
**注意:** 字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。

[19c4b576a5c64201aa49d4b0ea54a5e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/2e3ddf30115e4592b8a7bdbc9490b722.png
[bd9cecedd23d45a5a848b9a887b6ab6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/90330238d89e414c9e7b3a7c725a1dbc.png
[a2cfe44145d343efa39633f6f4dbceff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/8538cb7e25d24958b9c6040e0db29222.png
[4538a406a03f44afbbc20fe20e880639.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/38b2e87fd12540499e944975ed7d3d67.png