如何判断网页应用了哪些字体

Question

正常window系统下，以win7为例使用chrome查看网页;
对比安装了很多字体（这里指针对网页css样式中的font-family：Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,WenQuanYi Micro Hei,Microsoft Yahei,sans-serif）
这两个情况下看网页的字体是不同的，那如果去设计网页的话，单纯看css和网页效果岂不是没办法真正获取到真实应用的字体么？

因为css中的字体不得按照访问者的系统所带的字体去匹配么？

虽然chrome中默认是设置网页字体的，但当我安装了某个字体后，访问百度，X宝的时候，字体都明显加粗了，丑的飞起来，那设计网页的时候所设定的字体岂不是没有什么意义了么？

Answer 1

用 Firefox 可以看，比如上面图里就是我指定的字体。
开发者还是可以指定字体的（font-family: xxx），只要用户打开了下面这个选项，前提是字体已安装，而且沒有特殊设定。

Answer 2

chrome审查工具，查看computed样式，然后拉到底，最后就是实际的字体

Answer 3

单纯看 CSS 和网页效果岂不是没办法真正获取到真实应用的字体么？

是的，单纯看 CSS 是不能看出效果的。单纯看某个客户端的网页效果也是不行的。但是看不同客户端配置时的网页效果可以基本判断几种预想情况下的字体渲染效果。

CSS 样式中的 font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif 指定了一个网页字体选择的优先级列表，但是不能保证一定使用指定的某一个字体，使用哪个字体与本地安装的字体有关。

当本地安装的字体中存在高优先级的字体时（如Helvetica Neue），则被该 CSS 样式修饰的部分就会采用这个字体，如果不存在，则依优先级依次查询，直到最低优先级的字体（sans-serif）。最低优先级的字体是任何操作系统（Windows，Mac OX，iOS，Android，Linux等）中都默认安装的字体，而高优先级的字体则往往是需要另外安装的字体或操作系统独有的字体。这样既能保证网页中的文字有字体可以用来显示，又可以保证在本体安装的字体中有效果较好的字体时使用那些效果好的字体。

但当我安装了某个字体后，访问百度，X宝的时候，字体都明显加粗了，丑的飞起来，那设计网页的时候所设定的字体岂不是没有什么意义了么？

这很有可能是题主使用的字体在当前操作系统或浏览器内的渲染效果设置存在问题。

题外话

目前，中文字体的网页渲染仍然是一个难题。英文字体由于字体文件较小（几十到上百 KB），可以直接在线加载（参见 Google font），常见的技术有 CSS3 font face，而中文字体如果不裁剪的话，动辄几 MB 到十几 MB，在现有的网络环境下不可能在线加载，所以只能从本地现有的字体中选择。如果裁剪的话，则可以有效减少字体文件大小，但是需要根据网页的内容裁剪字体。

Answer 4

页面的字体是按顺序查询的，第一个没有的时候就查找第二个，再没有就查第三个。