标签：title 语言 tle fallback 需要 字体 内容 cors font
浏览器会根据定义的字体顺序使用字体，但是不是所有字体浏览器中都有定义，所以会有一个fallback机制，前面的字体找不到时就使用后面的字体。
<!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>
标签：title 语言 tle fallback 需要 字体 内容 cors font
原文地址：https://www.cnblogs.com/JasonWang-code/p/13279972.html
