快速知道网页上文字的字体、大小、颜色代码
2012-12-04 15:50
836 查看
对于网页设计者来说,其他网站上使用的字体有些是十分值得借鉴的,好的字体能大大提高可阅读性和访问感受,虽然可以使用firebug来获得确切的信息,但是花的操作步骤和眼力还是比较多的,而这次介绍的两个firefox扩展可以做到事半功倍的效果。
由于网页上标题、正文、链接等部分的文字为了区分开来,以及突出重点,所以一般会使用不同的字体以及大小来显示,而firebug每次查找字体信息都要进行选择和从一堆的相关css中提取。经常这样操作非常不可取。所以非常建议大家使用下面两个扩展:
首先是Context Font
这个扩展非常简单,它的功能可以方便的知道页面文字使用的是什么字体,字体大小,以及是否进行了加粗、倾斜。。。一个页面上所以不同样式的字体使用十几秒钟就可以全部知道。
操作方法:使用鼠标选中几个字(链接也可以),然后右击,在右键菜单中就可以看到有关字体的信息了。是不是非常的简单和快速!
![](http://www.rjno1.com/images/2011/201104a/fontkuozhan0.jpg)
并且点击右键菜单的那个菜单项,字体的名字还会被自动的复制到剪切板上,如果你的css中需要这个字体,现在只要直接粘贴就可以了。
第二个是Font Finder
Font Finder这个火狐的扩展比Context Font可以获得信息多很多。并且还可以就地对网页上觉得不好看的字体进行调整,这在网站模板设计的时候非常方便,因为调整是虚拟的,如果改动后不满意,直接刷新就可以还原重来。
Font Finder也是通过选中文字,然后在右键菜单中选择。不同的是,这个扩展只允许你选中一个字,可能是怕出现一次选中多种字体的情况出现。
在“copy elements”菜单中,你可以知道字体,大小、颜色等等信息,在跳出的界面上也可以方便的使用鼠标复制这些内容。
![](http://www.rjno1.com/images/2011/201104a/fontkuozhan1.jpg)
如果觉得显示的字不好看,想要调整,使用“adjust elements”菜单中的调整项吧。最下面的两个菜单还可以禁用网页上的某些字体哦。
虽然Context Font功能不多,但相比Font Finder操作简单的多,所以建议两个扩展同时安装,这样可以使用最少的步骤得到想要的效果,从而可以把更多的精力花在思考上面。
如果你想要知道网页上图片中的文字使用了什么字体,那么这两个扩展是办法的,好在软件No1曾经介绍过的“What The Font”在线工具可以做到。
由于网页上标题、正文、链接等部分的文字为了区分开来,以及突出重点,所以一般会使用不同的字体以及大小来显示,而firebug每次查找字体信息都要进行选择和从一堆的相关css中提取。经常这样操作非常不可取。所以非常建议大家使用下面两个扩展:
首先是Context Font
这个扩展非常简单,它的功能可以方便的知道页面文字使用的是什么字体,字体大小,以及是否进行了加粗、倾斜。。。一个页面上所以不同样式的字体使用十几秒钟就可以全部知道。
操作方法:使用鼠标选中几个字(链接也可以),然后右击,在右键菜单中就可以看到有关字体的信息了。是不是非常的简单和快速!
![](http://www.rjno1.com/images/2011/201104a/fontkuozhan0.jpg)
并且点击右键菜单的那个菜单项,字体的名字还会被自动的复制到剪切板上,如果你的css中需要这个字体,现在只要直接粘贴就可以了。
第二个是Font Finder
Font Finder这个火狐的扩展比Context Font可以获得信息多很多。并且还可以就地对网页上觉得不好看的字体进行调整,这在网站模板设计的时候非常方便,因为调整是虚拟的,如果改动后不满意,直接刷新就可以还原重来。
Font Finder也是通过选中文字,然后在右键菜单中选择。不同的是,这个扩展只允许你选中一个字,可能是怕出现一次选中多种字体的情况出现。
在“copy elements”菜单中,你可以知道字体,大小、颜色等等信息,在跳出的界面上也可以方便的使用鼠标复制这些内容。
![](http://www.rjno1.com/images/2011/201104a/fontkuozhan1.jpg)
如果觉得显示的字不好看,想要调整,使用“adjust elements”菜单中的调整项吧。最下面的两个菜单还可以禁用网页上的某些字体哦。
虽然Context Font功能不多,但相比Font Finder操作简单的多,所以建议两个扩展同时安装,这样可以使用最少的步骤得到想要的效果,从而可以把更多的精力花在思考上面。
如果你想要知道网页上图片中的文字使用了什么字体,那么这两个扩展是办法的,好在软件No1曾经介绍过的“What The Font”在线工具可以做到。
相关文章推荐
- 网页制作常用代码(文字颜色/字体/插入图片/flash等
- 使用NSMutableAttributedString为UIButton/UILabel 快速设置文字的大小,字体,颜色
- 用NSMutableAttributedString快速设置UIbutton Title/lable的文字:字体,大小,颜色
- 设定MyEclipse编辑代码区域文字的大小及非关键字的字体、字形和颜色
- 设置UIButton的文字显示位置、字体的大小、字体的颜色、加粗(特别是字体颜色设置的那句代码。。挺有用)
- IOS中一段文字设置多种字体颜色代码
- AndroidStudio-调节主题代码编辑区和LogCat字体大小和背景颜色
- WKWebView如何加载Html代码? WKWebView如何修改字体大小和颜色?
- HTML快速入门1——文字颜色、大小
- 代码改变字体颜色/大小
- 设置logcat代码颜色和字体大小
- markdown编辑器语法——文字颜色、大小、字体与背景色的设置(转)
- UIButton的文字显示位置、字体的大小、字体的颜色
- MFC--设置静态文本框的文字的字体、大小和颜色
- Vim设置菜单英文/字体颜色/英文字体/屏幕大小/行号/代码中文不乱码/空格缩进
- 设置UIButton的文字显示位置、字体的大小、字体的颜色、加粗
- TextView代码动态实现字体不同大小样式风格颜色
- 美工(一)网页颜色搭配技巧 文字字体、字号、字体排版等
- 用代码控制richtextbox的部份字体大小和颜色
- 【Inno Setup】修改安装分割线前面的文字并自定义风格(颜色、字体大小等等)