用Firefox+Greasemonkey 拯救我的眼睛
如果你的视力非常好，请略过此文。
昨晚洗脸时，我可怜的隐形眼镜掉了一只。今天，戴着少了200度的框架眼镜浏览网页，一个字，累。对于像我这样的高度近视患者，迫切渴望网页字体能够放大。对于Firefox自带的放大功能（Ctrl++），我不太喜欢，因为它把这个网页都放大了，变得很丑。一般来说，我看网页的时候，我只需要把文章内容放大，对于诸如导航栏之类的，维持原状即可。
如何实现只放大网页中特定的文本呢？
所需工具：Firefox+Greasemonkey
如果你了解Firefox和Greasemonkey，请跳过此段。
Firefox，中文名为火狐浏览器。我喜欢它的原因在于它丰富的插件可以帮我定制符合我的使用习惯的浏览器。
Greasemonkey是Firefox的一个插件，它可以使Firefox扩展再扩展。通过Greasemonkey，你可以用自己写的javascript来定制网页：屏蔽广告、更改字体、更改背景色等等。如果你不会写javascript，你可以到Userscripts.org上找脚本。一般来说，你可以找到你要的脚本，因为你不是孤独的。
假设，你已经安装了Firefox和Greasemonkey。我们以人人网为例，来说明如何增大其日志的字体。
右键猴子图标（浏览器左下角）->新建用户脚本。 出现一个对话框。（如果你是第一次使用Greasemonkey,需设置文本编辑器，你可以使用自己喜欢的文本编辑器，当然windows自带的记事本也是可以的。记事本的路径为\windows\system32\notepad.exe）
名字：脚本的名称。
名字空间：一个URL。如果你有自己的域名，可以填上。
描述：当你的脚本逐渐增多的时候，一个好的描述就是必不可少的了。
脚本应用到下列网页：http://blog.renren.com/* 说明应用到任何网址以http://blog.renren.com/开头的网页。
点击确定。出现文本编辑器，如图所示。在“// ==/UserScript==”后的空白区域写代码。
代码如下：
function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } addGlobalStyle('#blogContent {font-size: 20pt !important; line-height:1.5 !important;}');
我们定义了一个函数addGlobalStyle，它使你可以在页面中添加自己的 CSS 样式。
如果你熟悉HTML、HTML DOM、CSS，请跳过此段。
也许，你是第一次接触到getElementsByTagName，createElement，innerHTML这堆东西，是不是和我当初一样感到头昏脑胀了呢？
下面我来简单介绍一下最最基础的知识。
HTML指的是超文本标记语言 (Hyper Text Markup Language)。它使用标记标签（tag）来描述网页。HTML 标签是由尖括号包围的关键词，比如 <html>。
试一试：右键—>查看页面源代码。（或者使用Firebug插件）你会看到网页的HTML源代码。试着找找<head>标签。（<head> 标签用于定义文档的头部，它是所有头部元素的容器。）
document.getElementsByTagName('head')"[0]"返回标签名为“head”的对象的集合的第一个元素。
document.createElement('style') 在head部分中添加style元素。<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。style元素有一个必须的type属性，用以定义 style 元素的内容。唯一可能的值是 "text/css"。
style.innerHTML指的就是<style>和</style>之间的内容，也就是CSS（层叠样式表）代码。
接下去，我们就要写自己的css代码了。CSS 代码的格式为：
选择器 {属性: 值}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性。
看一下我们的代码：
#blogContent { font-size: 20pt !important; line-height:1.5 !important; }
我们把字体大小设成20pt,行距设为1.5倍。! important 关键字，保证您的样式覆盖原页面中已定义的规则。
解决了属性和值，我们来说一下怎么确定选择器。
试一试：现在随便打开一篇人人网上的日志，查看源代码。找到日志的内容。你可以按Ctrl+F查找。在日志内容的上方有<div id="blogContent" class="text-article">。
日志内容是在标有id="blogContent"的<div>标签下，因而我们需要使用id选择器。在id名前加上#号即可。另一种方法：因为日志内容同时是在标有class="text-article"的<div>之下的，我们也可以使用类选择器。在类名"text-article"加"."号即可。
试一试：现在随便打开一篇好友分享的日志，查看源代码。看看日志内容是在什么标签下的，有无id或者class，有的话是什么。然后，修改代码后测试一下。
好了！刷新一下日志。看看，字体是不是变大了呀~
Reference:
原创文章，转载请注明： 转载自ELLY66
本文链接地址: 用Firefox+Greasemonkey 拯救我的眼睛
文章的脚注信息由WordPress的wp-posturl插件自动生成
Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!
My Google Plus
订阅本站
2010年08月23日 20:19
上面的那么多小图标怎么弄出来的？
2010年08月23日 20:25
你说的是分享么？找了一个wordpress插件装上。
2010年08月23日 20:44
恩，对的。wp是强大。
2010年08月30日 19:46
400多度的路过
2010年09月22日 14:51
Chrome + Stylebot
2010年09月23日 20:33
Chrome怎么样啊？我挺想尝尝鲜的。