问个奇怪的问题,怎样知道页面上的文字的字体

比如字体设置的是:

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Microsoft Yahei';

但是在不同的系统下,字体显示的不一样,怎样知道当前眼睛看到的是哪种字体,因为我实在对字体不太感冒→_→
同事告诉我拿控制台一个一个删,这也是个办法,不知道各位知道可否从编程角度解决,比如js?

阅读 4.1k
3 个回答

如果是 Chrome 的话,哪儿需要插件啊,看下图:

图片描述

注意右下角。

chrome 鼠标移动到要查看字体的地方,按F12或审查元素
选择 computed 然后滚轮往下移动 你会看到
图片描述

Chrome 下安装这个扩展插件《whatfont

开启后,鼠标指针划到字体处,会自动展示出来是哪种字体,如图:

clipboard.png

抱歉,昨天晚上工作太忙没能及时补充内容。

当使用了这个插件后,点击某一个字体时,它可以把CSS定义font-family全部展示出来,而且还可以显示font-size字号、line-height行高、字体color属性值。

clipboard.png

起初这个工具是推荐给我们的设计师使用,对于不懂开发又想一眼看出页面是什么字体时,使用起来还是很方便的。

不过, @Humphry 提到这个插件对字体识别是有错误,该网页使用的字体并不是helvetica,而是open sans字体,但是此插件显示的"Open Sans","Helvetica Neue"是失效的。

因为我对Open Sans字体并不了解,所以关于这个问题我想请教SF的开发者 @joyqi ,对于字体这一块是如何设计与定义的,什么情况下字体会应用"Open Sans",什么情况下字体会应用helvetica

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题