如何知道网页元素的真实字体

This topic created in 4268 days ago, the information mentioned may be changed or developed.

比如用调试工具查看新浪微博里的中文的结果是
font-family: Arial, Helvetica, sans-serif;

用WhatFont插件查看的结果是
Arial - regular

我对CSS Font这部分不熟悉，明明是中文，为什么是英文字体。

还有这个字体，居然会因为Preferences - Language & Region - Perferred Languages的设置而变化，
修改Japanese和Chinese(Simplified)的顺序，网页的字体也变化了。

这个中文字体是sans-serif退化来的吗？
有办法能看到真实的中文字体吗？
这剪不断理还乱的逻辑到底是什么样子的？

头痛。

字体

serif

Arial

9 replies • 2014-09-13 14:14:13 +08:00

liaa

Sep 13, 2014

看我的动作:

https://dl.dropboxusercontent.com/u/85873187/gifs/gif_font2014-09-130-1.gif

liaa

Sep 13, 2014

arbipher

Sep 13, 2014

@liaa 赞赞赞！给你一万个赞！
还有，这个图是怎么制作的？

oott123

Sep 13, 2014 via Android

Get a FireFox。
火狐的原生 F12 里有个挺好用的字体查看工具…

juicy

Sep 13, 2014

最近也在研究字体哈，看透这个http://www.w3.org/TR/css3-fonts/#font-matching-algorithm 就差不多大致理解CSS Font的渲染原理了。

另外， Chrome的Developer Tools里面就有字体的渲染的详细情况。

比如
DejaVu Sans—165 glyphs
TakaoPGothic—112 glyphs
WenQuanYi Micro Hei—28 glyphs

LazarusX

Sep 13, 2014

如果 CSS 里只指定了英文的字体，那么对于中文来说，浏览器就依次按照浏览器的字体设置，操作系统的字体设置来查找 fallback 字体。

WhyTry

Sep 13, 2014 via iPad

你需要它 http://www.fontface.ninja/

liaa

Sep 13, 2014

我用这个制作 gif: http://www.cockos.com/licecap/

zangbianxuegu

Sep 13, 2014

@WhyTry 下载一个字体是怎么做的？