20、网页字体样式设置全解析

网页字体样式设置全解析

1. 通用字体渲染差异

不同浏览器在渲染通用字体时存在差异。像Mozilla、IE和Opera 7在Windows XP平台上渲染通用字体的效果就有所不同。不过， serif、sans - serif和monospace这几种字体在各浏览器中的显示较为一致。在 font - family 属性文档中， <generic - family> 指的是通用字体名称的可能规范。通常会把通用字体作为最后备选，示例如下：

p {
    font-family: Arial, Shruti, “Microsoft Sans Serif”, Tahoma, Mangal, Helvetica, sans-serif;
}

在 font - family 属性的字体列表末尾添加 sans - serif ，意味着如果用户计算机上未安装其他指定字体，就会使用通用的无衬线字体。

2. 应用 font - family 属性到网站样式表

以JT’s Island Grill and Gallery网站为例，可按以下步骤将 font - family 属性添加到样式表：
1. 修改 base_styles.css 样式表：

body {
    font-fam