25、网页字体样式与颜色设置全解析

网页字体样式与颜色设置全解析

1. 处理不同用户字体差异问题

在网页设计中，我们无法控制用户计算机上安装的字体，而且不同操作系统之间字体也存在差异。为了解决这个问题，我们可以创建一个适合页面的字体列表，希望用户至少安装了其中一种字体。如果用户没有安装这些字体，浏览器会提供同一字体系列的通用字体。

例如，我们可以这样设置字体：

font-family: Verdana, Geneva, Arial, sans-serif;

下面是一个字体选择的优先级示例：
1. 优先使用 Verdana。
2. 如果 Verdana 不可用，Geneva 是个不错的选择，但可能仅在 Mac 上可用。
3. 如果 Geneva 也没有，Arial 通常在 Windows 和 Mac 上都有。
4. 如果 Arial 也没有，就让浏览器选择一种无衬线字体。

以下是一些常见字体及其适用系统的表格：
| 字体名称 | 适用系统 |
| ---- | ---- |
| Geneva | Mac |
| Courier | Mac |
| Helvetica | Mac |
| Times | Windows、Mac |

2. 引入网络字体

有时候我们希望在页面中使用一些独特的字体，比如 Emblema One。这时候可以使用网络字体（Web Fonts），通过 CSS 的 @font-face 规则来实现。