如何快速知道网页上文字的字体、大小、颜色代码

对于网页设计者来说，其他网站上使用的字体有些是十分值得借鉴的，好的字体能大大提高可阅读性和访问感受，虽然可以使用firebug来获得确切的信息，但是花的操作步骤和眼力还是比较多的，而这次介绍的两个firefox扩展可以做到事半功倍的效果。

由于网页上标题、正文、链接等部分的文字为了区分开来，以及突出重点，所以一般会使用不同的字体以及大小来显示，而firebug每次查找字体信息都要进行选择和从一堆的相关css中提取。经常这样操作非常不可取。所以非常建议大家使用下面两个扩展：

首先是Context Font

这个扩展非常简单，它的功能可以方便的知道页面文字使用的是什么字体，字体大小，以及是否进行了加粗、倾斜。。。一个页面上所以不同样式的字体使用十几秒钟就可以全部知道。

操作方法：使用鼠标选中几个字（链接也可以），然后右击，在右键菜单中就可以看到有关字体的信息了。是不是非常的简单和快速！

并且点击右键菜单的那个菜单项，字体的名字还会被自动的复制到剪切板上，如果你的css中需要这个字体，现在只要直接粘贴就可以了。

Font Finder这个火狐的扩展比Context Font可以获得信息多很多。并且还可以就地对网页上觉得不好看的字体进行调整，这在网站模板设计的时候非常方便，因为调整是虚拟的，如果改动后不满意，直接刷新就可以还原重来。

Font Finder也是通过选中文字，然后在右键菜单中选择。不同的是，这个扩展只允许你选中一个字，可能是怕出现一次选中多种字体的情况出现。

在“copy elements”菜单中，你可以知道字体，大小、颜色等等信息，在跳出的界面上也可以方便的使用鼠标复制这些内容。

如果觉得显示的字不好看，想要调整，使用“adjust elements”菜单中的调整项吧。最下面的两个菜单还可以禁用网页上的某些字体哦。

虽然Context Font功能不多，但相比Font Finder操作简单的多，所以建议两个扩展同时安装，这样可以使用最少的步骤得到想要的效果，从而可以把更多的精力花在思考上面。

如果你想要知道网页上图片中的文字使用了什么字体，那么这两个扩展是办法的，好在软件No1曾经介绍过的“What The Font”在线工具可以做到。

官网下载Context Font https://addons.mozilla.org/en-US/firefox/addon/context-font/

官网下载Font Finder https://addons.mozilla.org/en-US/firefox/addon/font-finder/

本文地址：https://www.rjno1.com/how-to-know-fonts-color-size-in-website-quickly/