字体
font-family 字体。常用的有Serif 、Sans-serif 、Monospace
Serif（衬线字体） 中常见的有 Georgia 、Times New Roman 等字体；
Sans-serif（无衬线字体） 中常见的有 Avenir、Arial、Futura、Helvetica、Roboto 等字体；
Monosapce（等宽字体）中常见的有 Consolas、Courier、Ubuntu 等字体。
VSCode 快捷键：在
font-family:;中按下ctrl + space，会呈现出 VSCode 推荐的网络安全字体，可以在大部分设备上正常显示。
font-family:Georgia,"Times New Roman",Times,serif; 如果第一个字体找到了，就渲染第一个字体；如果第一个字体找不到，就会去找第二个字体，如果第二个字体找不到，就会去找第三个字体，依次类推。可以看到 "Times New Roman" 用了引号，因为字体中是不能包含空格的。
有很多网站也有更漂亮的字体，当然一定要写上备用的以防用户的设备上没有相应字体库渲染不出来
- fontsquirrel.com
- fonts.com
- myfonts.com
字体文件有很多格式，常见的有 ttf、otf、eot、woff、woff 2.0 等，网页推荐用woff 或 woff 2.0 ，这两种的文件压缩效率高，体积小，如果嵌入到网页中的时候请求字体文件体积小那么速度就会快。
关于从服务器下载文件的速度这一点，如何模拟网速慢的情况呢？因为大多数时候调试都是直接用自己的计算机模拟一个服务器，所以网速是很快的，文件也是几毫秒就下载完毕了。
因此要模拟网速慢的情况，可以使用浏览器的开发者工具，在 network 选项卡中，有一个模拟网速的下拉菜单，其中有很多项选择，一般模拟网速慢就会选择 slow 3G ，就会发现文件下载的事件直接拉到两三秒，感官上是很不好的。
除了模拟网速慢的情况，还可以慢速观察网页上原先变化极快的东西。比如无样式文字闪现 ，即使在很快的网速下，这个闪现只在一瞬间，但用户也是能捕捉到的，不利于提升用户体验，这也是要最大程度压缩文件尺寸、少用图片的原因，可以优化网页，减小服务器负载，也能提升用户体验。
使用别的字体的时候，需要注册字体。像在 fontsquirrel.com 网站中将字体格式转换成 woff 时，会下载一个 zip 压缩包，解压后有转换后的字体与一个 css 文件，将解压后的文件复制到项目目录里，可以为它建一个 font 的文件夹。css 文件中会有注册字体的代码，将这些代码复制到主体样式表的最上面就行了，注意一定要在样式表的顶部去注册字体。
@font-face{
font-family:"可以自定义";
src:url("字体文件所处位置") format("字体文件格式"),url("同一种字体有几种格式就引用几次位置") format("同一种字体的另外一种文件格式");
font-weight:normal; /* 可以修改 */
font-style:normal; /* 可以修改 */
}
复制过后的代码要记得修改路径，另外这里的字体名称以及粗细、风格都可以修改成自己想要的。
这时候就可以到需要设置字体的地方加入自己想要的字体了，记得将名称用引号包起来。
注册字体要使用额外的字体文件，总之是要从服务器下载的，会出现 无样式文字闪现 的问题，这样是难以避免的，不过可以尽量减小它的影响。
在字体注册@font-face 中可以加入 css 代码：font-display 。
- 默认值是
auto，让浏览器自己决定如何展现字体，不是所有浏览器的自动行为都是一样的； swap这个值代表先使用备用字体，自定义字体下载完成后再使用自定义字体，这样会出现无样式文字闪现；fallback代表给浏览器一个很短的时间用来下载自定义字体，在这期间会使用后备字体，如果时间到了没下载完，那你就别干了，继续用后备字体吧；block表示如果自定义字体没下载完，网页里的使用这个字体的文字全都消失不见，下载完了，文字才会出现，如果用户的网络出了什么问题，或者服务器中的文件、引用地址发生变化，导致自定义字体下载不了，那么...网页就根本什么字都没有了啊喂(#`O′)optional与 fallback 相似，也是给一段时间来下载字体，如果下载失败了浏览器就不会换字体，不过浏览器会偷偷尝试下载字体到缓存里，那么下次再进这个网页就会一直是自定义字体了，不过可能与第一次见面的字体会不一样
字体服务
也可以采用字体服务，它通常是一个网站，选中的字体无需下载，直接生成一个链接，把此链接粘贴到<head> 中<style> 的前面，就可以引用了。
字体的常规设置
font-weight 用来设置字体的粗细。预设值是从100-900，100表示很细，900表示很粗。
还有一些关键词 bold（粗体）、bolder（加粗）、lighter（细）、normal（常规）、inherit（继承）
font-style 字体风格，通常用来设置斜体 italic
font-size 字体尺寸。可以用预设值 large、small、medium 等来设置，也可以用数字加单位的形式自定义。跨设备开发的时候，使用相对单位的设置更好。
color 用来设置字体颜色。