1. 网页字体
我们可以利用font-family来设置字体栈。允许我们设置一系列的字体，浏览器会依次检索到第一个可用的字体为止。如果都没有的话，使用浏览器的默认字体。
p { font-family: "Trebuchet MS", Verdana, sans-serif; }
css 定义的广义字体
CSS defines five generic names for fonts: `serif`, `sans-serif`, `monospace`, `cursive`, and `fantasy`. These are very generic and the exact font face used from these generic names can vary between each browser and each operating system that they are displayed on.
It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable.
web safe font
Web friendly fonts are often compared with online fonts like [Google Fonts](https://fonts.google.com/) but they are different. Online fonts require an extra file to be loaded upon visiting the page. They are almost never installed natively on a device.
While online fonts from Google Fonts and other sources are no doubt beautiful and fun to use, it’s important to always include websafe fonts as a backup.
If you don’t, you might prevent certain visitors from reading your content.
a web safe font is one that comes installed by default on virtually every computer or mobile device. Here are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called **web safe fonts**. they are:Arial,Courier New,Georgia,Times New Roman,Trebuchet MS, Verdana
例如：一般我们设置Arial字体时，会设置*Helvetica*来作为替代字体， 他们都属于sans-serif字体（generic）
It is worth noting that font stacks with fallback options including a generic font family should still be used even if your design uses only web safe fonts. For example:
A font-family example
Let's add to our previous example, giving the paragraphs a sans-serif font:
p { color: red; font-family: Helvetica, Arial, sans-serif; }
p { font-family: Tahoma, Arial, sans-serif; }
web font host
- font face
- online font service: google fonts
