Firefox-字体设置与字体美化教程.pdf

这是一篇关于 Firefox 浏览器字体设置与字体美化的教程 由易至难地介绍了 使用 CSS 设置全局字体 包括 Firefox 软件界面字体 Firefox 字体设置界面的各项功能 Firefox 的字体链接机制 本文涵盖的内容仅针对 Firefox 浏览器本身的字体选择原理 并不要求进行诸如替换宋体 Simsun ttc 和 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字体设置对话框详解字体设置对话框详解 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 list monospace zh CN 它们的默认值都是 MS Song SimSun 也就是说 在显示中文字符