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

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

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

        首先是Context Font

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

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


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

        第二个是Font Finder

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

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

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


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

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

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

原文地址:https://www.cnblogs.com/zyy711865/p/2801504.html