字体族:在CSS中定义字体族时不需要引号，都是字体就需要引号了
- 衬线字体serif：字体周围有一些装饰性的内容。比如宋体
- 非衬线字体sans-serif：规则的字体，一般的字体都是
- 等宽字体monospace：每个字母都是占有相同的空间。写代码时的字体IDE使用的一般是等宽字体。
- 手写体cursive
- 花体fantasy，华丽的有明显的弯弯的字体
多字体fallback：
浏览器会根据定义的字体顺序使用字体，但是不是所有字体浏览器中都有定义，所以会有一个fallback机制，前面的字体找不到时就使用后面的字体。
网络字体（远程引用字体），自定义字体（本地引用字体）。
iconfont：把图标当做文字来使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* 选择哪种字体 */ /* Consolas字体是WIndow10自带的字体，但是Consolas字体只能使用在英文上，使用可以看到浏览器为中文设置了默认字体 */ /* 这里需要注意的是，不是说浏览器只会在font-family中选择一个font，它会根据不同的语言和不同字体能够使用的语言进行自动fallback */ /* font-family: ‘Consolas‘; */ /* font-family: ‘Consolas‘, ‘SimSun‘; */ /* font-family: ‘aaaaa‘, ‘SimSun‘; */ font-family: ‘aaaaa‘, ‘Consolas‘; } .chinese { /* 字体名称使用引号，字体族不要使用引号 */ font-family: "Microsoft Yahei", serif; } /* 自定义字体 */ @font-face { font-family: "IF"; /* 可以是网络字体，也可以是本地字体，这里使用本地字体，如果使用网络字体，一定要注意cors的问题 */ src: url(‘./self-define-font.otf‘); } .custom-font { /* 使用自定义字体 */ font-family: IF; } /* 如何理解iconfont */ </style> </head> <body> <div>Hello world 你好，世界</div> <div class="chinese">你好</div> <div class="custom-font">你好，世界 Hello world</div> </body> </html>