网页字体

摘自：http://cyj.me/programming/2013/08/10/html-css-for-designers/

我们经常会听到设计师或者需求方这样要求，这里给我用微软雅黑，看上去高端洋气一点，啊，能不能所有的都是 微软雅黑，微软雅黑多好看呀。对于用惯了 Windows 系统，一路宋体走过来的同学们来说，Windows Vista 里开始加入的雅黑、Tahoma 等反锯齿字体无疑是个福音。中文突然也不那么毛毛糙糙了，既然它这么好， 干嘛不全用上呢？

负责任的前端开发可能已经告诉你了，那在那些没有微软雅黑字体的浏览器里怎么办，用什么字体呢？

要回答这个问题，我们得从** Web Safe Fonts **概念说起，在 Internet 如火如荼的日子里，Web 开发者和 浏览器厂商都需要面对的一个问题是，都有那些字体可用。在这里需要表扬的是微软（咦，好奇怪），1996 年， 它开始了一项叫做 Core Fonts for the Web 的项目，为因特网提供可免费使用的私有字体：

• Andale Mono
• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

支持 Windows 和 Mac。因为授权协议，虽然 2002 年项目终止，这些已经发布的字体都能免费使用，使得 开源社区也能得享便利，因此，所谓的 Web Safe Fonts，其实就是指主流计算机平台（Windows、Mac OS、 Unix + X）上均有支持的字体：

• Arial / Helvetica
• Times New Roman / Times
• Courier New / Courier

注意这里的字体划分方式：

• Arial 和 Helvetica 归为一类，它们是无衬线字体，即 sans-serif。在 CSS 中，这个类别概念叫做 字族，即 font-family 属性；
• Times New Roman 和 Times 也是一类，它们属于 serif 字族，即有衬线字体；
• Courier New 与 Courier 又是一类，它们是等宽字体，字族叫做 monospace。

当然，随着事件推移，技术演进，能在 Web 中安全使用的字体早已不止这六个，字族也日渐丰富，但通常而言， 字族分成如下几类：

• sans-serif：无衬线字体，通常认为它们在屏幕上表现更好，更清晰
• serif：有衬线字体
• monospace：等宽字体，中文天生等宽，英文则不同
• cursive：草书
• fantasy：含有符文或者装饰属性，但仍能表示字符的字体

通常在浏览器里，前三者是可配置的，用户可以设置自己在各个字族里偏好的字体。

然后回到微软雅黑，假如要设置标题字体成雅黑，那么正确的 CSS 应该这么写：

h1 {
    font-family: Microsoft Yahei, sans-serif;
}

我们设置了最佳字体为微软雅黑，但对于没有雅黑的用户，我们告诉它这里用用户浏览器里设置的无衬线字体即可。 但是要注意的是，浏览器里的设置是会坑人的，浏览器并不阻止用户给等宽字族设置非等宽字体，所以，为了取得 更好的设计体验，假如必须设置字体，则越详细越好：

h1 {
    font-family: Microsoft Yahei, Hiragino Sans GB, Helvetica, Arial, sans-serif;
}

在这里我告诉用户，你的电脑如果有微软雅黑，那就用雅黑；如果没有雅黑，那有冬青黑 （Mac 下新增的中文字体，显示效果极佳）没？还没有啊，那就用 Helvetica，不行就 Arial。再不行，就 随便哪个无衬线字体把。

---

另外，作为中文网站， 设置英文字体对中文文字的表现是没有影响的（这里仅指单纯的文字表现，对齐、下划线等问题不予考虑），英文字体仅对英文字体及一些字符有影响，若没有设置中文字体，中文字就会受浏览器的默认字体影响

转载于:https://my.oschina.net/huanjoy/blog/1805410