这是一篇关于Firefox浏览器字体设置与字体美化的教程。由易至难地介绍了:
** 使用CSS设置全局字体(包括Firefox软件界面字体)
** Firefox字体设置界面的各项功能
** Firefox的字体链接机制
本文涵盖的内容仅针对Firefox浏览器本身的字体选择原理,并不要求进行诸如替换宋体()和Mactype渲染等。
本文的测试环境为Windows 7简体中文,Firefox版本为4.0Beta8pre,截图中的字体经过Mactype渲染,系统宋体热替换为XHei Classical。
关键字:字体, Firefox , CSS, 语言, about:config, 字体链接, font link
1.使用css设置全局字体
Firefox的很多个性化可以通过css脚本来完成,其中我们知道userChrome.css修改的是Firefox程序界面,而userContent.css修改的是网页内容,而这两种方法的语法是相同的:*{font‐family: Myriad Pro !important;}
*{font‐size: 12pt !important;}
前一条语句设置的是字体,后一条设置的是大小。设置之后作用于所有的字体,从而Firefox 的字体对话框中的设置不再生效。这种设置方式是全局性的,适用于一劳永逸锁定某个字体的用户。不建议锁定字体尺寸,否则很多网页的排版效果会大打折扣。
注意到这里使用的是一个拉丁字体Myriad Pro,这时,如果要显示中文,则会按照Firefox 的字体链接机制来选择合适的中文。如果要强制使用某中文字体,可以
*{font‐family: 明兰 !important;}
但也可以使用字体链接的方式,使得英文用Myriad Pro,中文用明兰,即
*{font‐family: Myriad Pro, 明兰 !important;}
2.Firefox字体设置对话框详解
如何用css美化表单Firefox通过字体对话框提供了非常丰富的字体设置,与css相比,这种设置方式的优势非常明显。首先css能做的,字体对话框都能,它能方便地根据不同语言设置不同字体,包括Serif/Sans/Mono字体,设置后点确定立即生效。相比之下,css虽然也能实现,但语法复杂且不直观,更不用说每次修改都需要重启。所以,字体对话框是进一步了解Firefox字体的必由之路。
2.1. 基本知识
网页字体一般分为两大类:比例字体(Proportional)和等宽字体(Monospace)。我们常
见的网页字体均是比例字体,等宽字体往往用于网页上代码的显示。另外,这两个概念是针对拉丁字体而言的,中文字体严格说并不宜按此方式分类,但这也不影响Firefox中设置中文字体。
比例字体又细分为两类:衬线(Serif)和无衬线(Sans-Serif)。同样这个概念来自说拉丁字体。
2.2. 高级字体对话框
我们先从高级字体对话框开始,因为如果不先介绍它,下面的基本字体设置反而无从说起。点击菜单栏“工具-选项-内容”,在字体和颜中点“高级”,便打开了Firefox高级字体对话框,如图:
1.打开这个界面,首当其冲就得取消①处的勾。
↘这个选项清楚地表明,如果勾上,Firefox将根据网页源代码的设定来选择字体,而不采用你的设置。而网页的作者为了保证兼容性,都会采用最保守的字体设置例如Arial/Times New Roman等,这绝对不
是字体美化爱好者愿意看到的。
2.②处的菜单,设定的是字体所作用的语言。事实上Firefox的一大强项就是可以为多种
语言单独设置字体。这里我们以Western为例,换句话说,这里设置的字体对网页语言为Western的网页有效。也许有人问“我上哪知道网页用的是什么语言?”这个下文“不同语言单独设置字体”会具体提到。
3.上文已讲,比例字体③和等宽字体④是两个大类。如果没有这个概念,我们很可能会把
截图理解成4个分类。事实上Serif和Sans-serif是归属于Proportional的。我认为如果Firefox在UI上加上一定的缩进,可以使之更明朗。
a)于是我们先看Proportional,这个菜单只有两个选项,Serif和Sans-serif。它直
接影响到了网页的主要显示字体。如果这里选择的是Sans-serif ,那么网页就按下面Sans-serif 菜单中设置的字体来显示,反之亦然。在这个例子中我设置的是Sans-serif ,那么网页显示的字体将是Avenir Next Office ,否则就是Minion Pro 。 b) 下面就有一个很奇怪的现象出现了:无论是在Serif 还是Sans-serif 的菜单中,你
都会看到同样的字体列表,只是顺序不同。前者把所有Serif 字体按字母排序放在上面,用一条细细的分
隔线和Sans 字体分开,后者则相反。这一切都只对拉丁字体,对中文字体来说,它们有的被放在了Serif ,有的被放在了Sans 。要理解这些得了解字体的命名机制和制作过程,对我们来说完全没有必要。
i. 我们要知道的是,不管在Serif 还是Sans 菜单中,你对字体的选择是不受限
制的,你可以在Serif 菜单中选择Arial ,也可以在Sans 菜单中选择Times !
ii. 由此说来,这两个菜单最大的好处是可以储备两个字体,用Proportional 菜单
来切换。举个例子,我很喜欢Avenir Next Office 和Minion Pro 。我可以在Serif
里面选择Minion Pro ,在Sans 里面选择Thesis Sans ,然后要切换的时候,我
只需要改变Proportional 菜单的选项,网页字体立即更换(测试网页)
。而不需要在一个很长的菜单中从Avenir Next Office 往下滚动去Minion Pro 。(对
于键盘爱好者来说,不难发现菜单上处于展开状态或者拥有焦点的时候,快速
输入字体名即可定位字体,这和资源管理器中快速定位文件是类似的)
iii. 事实上,这两个菜单的初衷并非上述应用。上述取巧的方式只是因为很多网页
都不分开指定字体。而某些复杂的网页中,确实有Serif 和Sans 字体共存的现
象,这时两个菜单中的字体都会得到使用,只是这样的网页并不常见,例如在这个网页上,你会发现上面的技巧不起作用——无论你如何切换Proportional
菜单的选项,网页字体都不会有改变,而是主要以Serif 显示。
下面④是Monospace 字体,如果不是经常去编程/开发相关的网站,一般是不太会用
4. 前
2.2.1. 不同语言单独设置字体
Firefox 浏览器字体设置的一大优势在于不同语言字体的单独设置。在高级字体对话框截图 如图,选择Simplified Chinese
XHei 中的字符显示
到这个菜单,它的设置也跟Sans/Serif 类似。只是单独有一个字体大小的设定。
5. 字体大小的设定我没有在前面提到,而只是标记了⑤中的Minimum font size ,因为面两个“Size: 16”的设置,似乎总是不起效果。而Minimum font size 则是立竿见影。设置最小字体大小可以给网页的文字带来“整体放大”的效果,但是设置得过大也会让网页排版出现问题。
中②的部分,我们用了Western 举例,上述设置适用于西文网页。对于中文网页,我们可以选择一种专门的中文字体,设置方法也是类似的。
–– Proportional 设置为Sans-serif
– Sans-serif 设置为你喜欢的中文字– 这样设置后,网页的中/英文字体均用
这里要说的一点是,虽然Firefox针对不同语言有着详细的字体设定,但网页的种类是千变万化的。
–例如这个网站,打开看是英文,但谁能想得它的语言设定是土耳其语?这只有通过查看源代码方可知一二:里面写着“Charset=windows-1254”,正是土耳其语的code page。–又比如说Google的搜索页面、Gmail等,源代码里面写着UTF-8,而Fonts for菜单里面并没有“UTF-8”这种语言,事实上在简体中文操作系统中。Firefox是跟随简体中文的语言设定来显示Gmail和Google的搜索页面的。
这也就是为什么经常是改了字体,却不一定在每个网站都能看到效果。除了通过看网页源代码的方法来了解网页的字体设置外,一个比较简单的方法是把自己常用的语言设定完全不同的字体,例如Western设置为字体A,简体中文设置为字体B,当一张网页打开后不是A 或者B字体,那么它的语言设定就既不是Western也不是简体中文。
2.2.2.基本字体对话框
说完了高级再看基本字体对话框,就要简单得多。
在此Default font显示的字体由以下几个因素决定:
–最后一次在高级字体对话框中设置的字体语言
–该语言Proportional字体菜单中的选项
–相应Serif/Sans-serif菜单里的字体
如果这样说很含糊的话,按2.1.1截图中的例子设定,在Default font里面看到的就是XHei;如果把2.2.1截图中的Proportional改成Serif,在Default font里面看到的就是Georgia,如果把2.2.1截图中的Fonts for改成Western,那么在Default font里面看到的就是前文截图中的Avenir Next Office。
↘正是因为如此,对经常去简体/繁体/英文网页的用户来说,在基本字体对话框改动后,很可能看不到任何字体的变化,因为你可能想改的是英文网页的字体,而最后一次高级字体对话框却停在繁体中文。
3.Firefox字体链接机制和中英混排
上文中提到为“简体中文”设置字体为XHei,这时即使在中文网页中出现中英混排,也全部是用XHei中的字体来显示。我目前的XHei是XHei Classical,故英文字符为Agora Sans,中英混排的效果:
但这有一个问题,就是中文引号。按这样的设定,在Google Reader中显示一篇英文文章,引号的效果是全角引号:
用Agora Sans Pro来显示则正常:
也就是说,使用中文字体来显示英文的引号不正常。
而我们知道,系统在显示文字的时候存在着“字体链接”的概念。例如我要用Agora Sans 来显示中文网页,显然这个字体中没有中文字符,在碰到中文字符的时候,Firefox就会像
系统其他程序一样,使用系统默认的中文字体来显示(除非注册表中有单独为Agora Sans 设定链接到的中文字体),这和前文“使用CSS设置字体”的机理是一样的:选择一个默认的英文字体,然后选择一个默认的中文字体。而Firefox强大之处在于,它自身就有了完善的字体链接机制,而不需要操作注册表,也不需要替换宋体。
现在我们把简体中文从XHei改为Agora Sans,其余不变
网页显示……惨不忍睹
为什么会这样?因为Firefox自己的字体链接机制起了作用!这个设置出现在about :config 里面。到下面的键:
font.name‐list.sans‐serif.zh‐CN
font.name‐list.serif.zh‐CN
font.name‐space.zh‐CN
它们的默认值都是:
MS Song, SimSun
也就是说,在显示中文字符时,先MS Song里面的字符,再SimSun里面的字符。所以上图“专、扩”
等字用的是MS Song,而“交流”用的则是SimSun(替换为XHei)。↘要改变这一现象,只要把MS Song改成你需要的字体即可,例如
XHei, SimSun
(最好上述三个键都改成同样的值)。
效果马上就有改善。
而这样的好处是你可以随时把默认链接到的中文字体改成你自己喜欢的,而英文字体不变,