# 浏览器都支持哪些字体

首先，浏览器支持什么字体取用户系统里安装了什么字体，比如CSS中这么写：

font-family:"微软雅黑","黑体","宋体";

那么浏览器会尝试按照从左到右的顺序依次应用，假设用户电脑上没有安装微软雅黑，那么就用黑体。

接下来，开发人员有点郁闷了，这个世界有这么多字体，我怎么保证用户电脑上有我希望的字体呢？美工给我的完美效果，到了老板电脑上一团糟，会不会被骂死？

1. 解决办法一：

这时，CSS勇敢的站出来了，它约定了5种通用字体："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"，请注意，这5个不是5个字体，表示5类字体，比如说serif表示那种字体成比例，且上下有小横线的（参考time new roman）,那么只要符合这个特征的字体都可以算成是serif, 具体采用哪个字体，由浏览器自己根据用户电脑上安装了哪种字体采用一个默认的，各浏览器可能有所不同。几乎所有你知道的普通字体都落入这5种字体类中，这样CSS可以基本上保证一个网页呈现在不同用户的电脑上的用户体验是差不多的。

1. 解决办法二：

最后，我们的美工比较变态，非要弄了个高大上的字体，一般用户电脑上都没有的咋整？我们可以用font-face让用户的浏览器从服务器上下载字体

@font-face {
    font-family: 美轮美奂的字体;
    src:url('字体文件1.woff'),  
    url('字体文件2.ttf'),
    url('字体文件3.eot');
}

你问我为什么要搞好几个url指向多个字体文件？我只能说还是为了那个坑爹的兼容性，怕有的字体文件在这个操作系统不支持啊。。。

参考文章

1. 解决办法三：

把想要的文字做成图片，这样做有几个明显缺陷：1. 不可能大范围的使用该字体；2. 图片内容相对使用文字不易修改；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。