跳转至内容

浏览器字体设置

0% developed
来自维基教科书,开放世界开放书籍

简介


许多人觉得需要调整浏览器字体大小,无论是为了弥补视力不好还是为了让一些设计糟糕的网页变得可读。我自己对这个主题的无知在试图解读 Firefox 和其他浏览器的帮助页面时就被快速发现了。我以为我已经理解了,但实际上很少有。

许多部分会影响最终的字体大小。 这些包括网页作者的 HTML 页面设计、用户样式表、许多浏览器设置以及平台自身的显示设置。 每个浏览器在功能上都有所不同,尽管最实用的设置在所有浏览器中都是通用的。 本页面介绍了三种常见浏览器中的一些文本大小功能。

以下是一些字体定义。 有称为的一般字体集。 这些包括衬线(带尾巴)、无衬线(不带尾巴)、比例(每个字符的宽度根据整体外观调整)、和等宽(每个字符具有相同的宽度)。 每个族都包含一些字体变体(有些使用术语字形),每个变体都有自己的字体名称,如Times New RomanArialCourier。 使用最多的字体是可缩放的,这意味着它们可以放大或缩小相当大的程度,而不会出现毛边。 有关术语的更详细描述,可能更适合印刷,请参见标题为字体的维基百科页面。

这里“字体”指的是“命名字体”。 在对字体一词的直观使用中存在一些混淆。 大多数人倾向于使用字体来指字体名称,或许还会指字体族,但不指字体大小、字体颜色或其他属性,理解这个简单的点有时可以使原本的混淆变得清晰。 从印刷到计算机屏幕的术语转换使事情变得混乱,但这里描述将被发现很容易理解。 如果这些笔记使用字体字形变体这些术语,它们将指的是字体名称,如CourierArial,而如果指的是大小,则将使用“大小”一词。

 

屏幕显示设置

[编辑 | 编辑源代码]

在最高级别,软件平台的显示设置控制着所有东西的大小; 在桌面上、在应用程序上、文本、图像、表格、所有东西。 也就是说,屏幕可以保持在它的本机分辨率,通常是它的最大分辨率,或者可以设置为更低的分辨率。

为屏幕设置更低的分辨率意味着像素被假设为被分组到比以前“更大的块”中,因此显示在屏幕上的物体,它们的宽度仍然以相同数量的像素定义,现在必须占用更大的空间。 换句话说,软件的逻辑屏幕像素都映射到比以前更多的物理屏幕像素。 结果,屏幕上的所有东西都被放大,在小屏幕上,软件需要重新排列布局,以使其全部适合。

应该更改桌面文本大小,如果阅读起来不舒服。 在考虑对浏览器或其他程序中字体进行任何其他调整之前,应该进行此设置,因为此设置也会影响它们。 例如,Windows 平台在其控制面板显示部分调整屏幕分辨率。 尽管此设置可以大幅度提高,但大多数程序在响应此设置时所能处理的调整存在限制。

 

网页中的字体大小

[编辑 | 编辑源代码]

网页作者使用的尺寸代码会极大地影响网页,尤其是在用户尝试更改文本大小的时候。 主要问题与作者是否以绝对大小或相对大小设计其页面有关。

绝对大小


使用绝对长度测量来定义字体大小,例如,pt(磅)、px(像素)、cm(厘米)或in(英寸)会导致字体以精确的大小显示,浏览器将使用转换因子在页面上呈现文本。 当浏览器设置为标称时,也就是说没有缩放或其他放大文本时,文本将以接近印刷品中发现的大小显示。

这并不是说绝对大小是一件坏事。 它们通常会生成清晰的网页。 但是,当用户尝试使用默认设置来增大文本大小时,它根本不会改变。 使用默认设置不会对以磅或像素为单位的字体大小产生任何影响。

要快速测试这个想法,只需打开Google 搜索页面,并尝试使用默认字体设置增大其大小(不是页面缩放)。 Google 的网页作者已经使用绝对单位指定了字体的尺寸。

相对大小


使用相对长度测量来定义字体大小,例如,em(容器字母“m”的宽度)、ex(容器字母“x”的宽度)或%(容器字体大小的百分比),没有任何绝对大小的提及,允许使用所有浏览器的文本大小功能。 这是大多数网页的首选设计方法。

浏览器在显示文本时所依据的底层假设是每个 em 单位相当于 16 个像素。 此假设将在显示之前进行修改,以考虑浏览器的默认设置。(据说 Internet Explorer 在仅使用相对大小且在页面的 body 标签中放置了 100% 的字体大小的情况下,运行效果最佳)。

混合绝对和相对


当网页或其样式表中同时存在绝对相对字体大小的混合时,页面可能仍然能够正常工作,用户并不知道情况是这样的。 但是,当选择较大的默认大小,相对大小会进行缩放,而绝对大小不会,这会导致文本出现很多混淆和错位。

大多数浏览器都具有帮助克服这种混淆的功能,并且可以忽略绝对大小。 当这样做的时候,用户必须选择字体来替换它们。 此外,用户可以使用他们自己的样式表。

默认大小和字体选择


当页面样式中不存在绝对或相对字体大小时,将使用浏览器的默认字体大小。 如果作者提供了字体选择,例如,Times New Roman,它将被使用,但如果未指定,则将选择默认的字体名称。 对字体颜色也有类似的论证。

“完全没有大小”的情况会使用客户端样式表。 它拥有所有其他样式的最低优先级。

 

常见浏览器功能

[编辑 | 编辑源代码]

下表中列出了三种浏览器以比较它们的文本大小功能。 而不是赞扬或贬低任何一个浏览器,指出几乎所有互联网浏览器都是免费提供的,因此完全有可能为特定任务使用不同的浏览器,可能更有用。 关于每个类别的说明可以在下面的文本中找到。


三种浏览器的字体大小功能
功能 Internet Explorer 8 Mozilla Firefox 3 Opera 11
更改用户字体大小
更改用户字体系列
缩放整个页面
仅缩放文本
设置最小字体大小
用户样式表
[1]

[2] [3]

[4]
辅助功能



浏览器选项和字体偏好使用像素单位。为了显示基线,它们将 1em 等效为 16 像素。在没有其他显示放大功能的情况下,这将显示为约 12pt。
关于点


安装或更改本地样式表时,几乎所有浏览器都需要重新启动浏览器才能看到更改。这也适用于 Opera 中的偏好设置更改。
记住重新启动!


更改用户字体大小


这是浏览器的主要尺寸调整,它只影响文本,而不是像页面缩放设置那样影响整个页面。它有时被称为 *默认大小*,因为它是任何其他规格不存在的情况下使用的值。更重要的是,当网页作者正确地以 *相对* 大小指定字体时,此设置将提供背景大小设置或基准大小,这将作为页面上所有字体范围缩放的参考点。它是一个人会经常使用以获得他们喜欢的查看级别的设置。这三个浏览器都允许用户更改显示的字体大小,甚至可以覆盖作者的特定点大小以支持他们自己的偏好。

在这三个浏览器中,Internet Explorer 8 的功能最少。它没有单独的 *默认大小* 设置,而是依赖于“查看”(和“页面”)工具栏上的五个“最小到最大”选项。最近对 Internet Explorer 8 的测试,使用接近原生屏幕分辨率、100% 页面缩放和浏览器字体设置处于最大值,无法生成大于约四分之一英寸 (6mm) 的 1em 文本。Firefox 3 和 Opera 11 都可以在很大范围内指定默认大小,并且可以在浏览器选项(偏好设置)中设置。

更改用户字体系列


选择 Arial 无衬线字体用于大多数网页工作是幸运的,因为它具有良好的清晰度,并且大多数用户倾向于坚持使用它。但是,当作者没有指定要应用于页面的字体名称时,将使用用户的默认字体。另一方面,如果网页作者 *已* 指定要使用的字体名称,但用户发现这些字体不令人满意,那么用户可以覆盖他自己的选择以支持他自己的偏好。在这三个浏览器中,覆盖只是清除框的问题。

这三个浏览器在字体名称和字体颜色选择方面表现同样出色。

缩放整个页面


所有三个浏览器都有页面缩放功能。顾名思义,文本和其他页面结构都会增加,并且不受任何其他大小设置的限制——它只是一个页面放大镜。此设置可用作临时措施来放大文本,尽管它会放大所有内容。令人惊讶的是,这三个浏览器在合作精神上,都使用相同的快捷键进行缩放。(*Ctrl+plus* 以增加;*Ctrl+minus* 以减少;*Ctrl+zero* 以重置)。

Internet Explorer 8 和 Opera 11 的下拉菜单中都有大量的页面缩放设置,但没有重置的迹象。另一方面,Firefox 3 只有“向上或向下”的缩放选择,但显示了重置。

仅缩放文本


此功能允许缩放页面文本,而不改变其他结构。它是一个真正的文本功能,因为它不能降至低于最小字体大小设置。与其他同类功能不同,它还增加了作者指定的字体大小,他的绝对大小,以及具有相对大小的字体;这样做不会覆盖作者的字体。此功能类似于 *最小字体大小* 设置。它使用与页面缩放相同的快捷键。

另一方面,一些功能,例如横幅文本最好使用固定绝对值来制作,这样当用户增加文本大小时,文本不会溢出框。因为文本缩放会影响所有文本,它可能会扭曲此类功能。

在这三个浏览器中,它仅在 Firefox 3 中提供。

最小字体大小


乍一看,*最小字体大小* 似乎与 *默认大小* 相同。但是,*默认大小* 指的是 *常规正文文本*,而作者仍然可以设置低于正文文本的值,例如表格中的文本。此最小字体大小设置是最通用的,因为它适用于绝对大小和相对大小,并且无需覆盖作者的字体。

也就是说,即使作者在其样式表中指定了 9px 字体,16px 的最小字体大小设置也会使其放大。缩放不适用于页面上的 *所有* 字体;只有低于阈值的字体。因此,如果此设置高于默认大小,它将覆盖一些值。那些希望所有文本都不小于正文字体的人应该将默认值和最小值设置为相同。另一方面,对于那些没有特殊查看需求,并且希望赋予网页作者最大显示范围的人来说,最小值应该在默认值的约三分之二处。

Firefox 3 和 Opera 11 可以设置最小字体大小,但 Internet Explorer 8 没有特定的设置。

用户样式表


作者的样式要么直接写入网页中(标题样式或内联样式),要么包含在与网页一起下载到浏览器的样式表中。页面上可能有多个样式表和许多样式,浏览器的任务是决定将所有样式中的哪些样式应用于页面部分。浏览器有时允许用户添加他自己的样式表,并且可以优先考虑此样式表以决定页面上的格式。这允许用户指定他自己的样式,尽管只有在他的本地显示中才能看到这些样式。此功能允许为特殊目的定制样式;视障人士的辅助功能,以及克服一次性问题类型。

Internet Explorer 8 和 Opera 11 允许从“浏览”对话框中添加此类样式表,而 Firefox 3 需要用户手动将 css 文件添加到浏览器的配置文件文件夹中。在本文档底部可以找到有关它们包含的引用。使用 Internet Explorer 8 测试了样式表,对于那些熟悉 CSS(层叠样式表)样式表达式的创建的人来说,这是一个简单的过程。感兴趣的各方可以在  W3 CSS 参考 和  字体测试器 中找到创建样式表的方法,许多人发现他们可以在经过一段时间的学习后,在 *记事本* 中编写 *。css* 文件。

辅助功能


所有三个经过测试的浏览器都热衷于提及他们的辅助功能,尽管它们的有效性尚不清楚。我最近对 Opera 11 中语音功能的测试完全失败,并且提交了错误报告。也许可以说,用户样式表功能的包含本身就是朝着允许特殊格式迈出的一个步骤,尽管提供一系列适用于每个残疾分组的样式表的浏览器无疑会赢得最大尊重。在这三个浏览器中,只有 Opera 允许从浏览器的工具栏中应用高对比度样式。欢迎对该主题有经验的个人在此添加他们的评论。

虽然通常不被认为是浏览器问题,但 *离线查看* 的 Windows 和 Microsoft Office 帮助面板使用 Internet Explorer 的特殊格式版本来显示基于 HTML 的文档。因为这些帮助面板缺少正常的浏览器工具栏,所以它们有选项按钮来允许增加或减少字体大小。当 Microsoft 产品访问 *外部帮助网页* 时,它优先使用 Internet Explorer。不幸的是,这些网页帮助页面并不总是按预期进行缩放。

使用宽屏尺寸(约 1600 像素)的人会发现,一些 Microsoft Office 帮助页面中有一些文本对于日常工作来说太小了。(例如 VBA 帮助示例代码。)在 Windows 7 的 Word 2010 中,即使存在用于此目的的按钮,VBA 帮助也无法调整大小。但是,因为这些帮助功能使用 Internet Explorer 来显示它们,所以发现用户样式表是最好的解决方案。通过将 IE 设置为具有用户样式表,可以将 MS 帮助屏幕设置为任何指定文本大小。但是,这样做通常意味着 IE 必须保留用于该特定目的,并且可能需要另一个浏览器来进行一般的网页浏览。以下下拉框中提供的简单 css 代码可以保存为 css 文件并安装为用户样式表,以展示如何增加难以处理的页面的文本大小。(例如,一些离线开发人员 VBA 示例)。

也就是说,在 MS Word VDE 中打开的离线 MS 开发人员帮助页面即使在在线 VBA 帮助正常工作的情况下,也顽固地保持着很小的文本。

MS 帮助页面的用户样式表
/*  This style sheet allows Microsoft Office Help pages to display 
    in the size specified below - eg 11 point */

/*  Be sure to restart the Office application after installing the 
    style sheet  */

/*  When the help pages are still badly distorted, then repairing MS Office
    will sometimes rectify the matter  */

/*  Install this css file as a User Style Sheet to see how it works. 
    Be sure to select the 'Ignore font sizes specified in web pages' and the 
    'Format documents using my style sheet'  check boxes
    in the Accessibility dialog of the Internet Explorer's browser options. */

                 
/* ****************************Styles ********************************* */

div
{
font-family:Verdana serif monospace;
font-size:11pt;
line-height:1.5em;
}   


参考

[edit | edit source]
  1. Internet Explorer 8 样式表
  2. 自定义 Firefox
  3. Firefox 配置文件位置
  4. Opera 中的用户 CSS

另请参阅

[edit | edit source]
  • 尝试 CSS 编码  : 一个免费使用、交互式、CSS 代码编写器和查看器,主要用于文本。
  • 字体  : 维基百科上关于字体的详细页面
  • W3 CSS 参考  : 万维网联盟的 CSS 参考页面
  • 添加用户样式  : 在 Internet Explorer 中创建用户样式表的详细信息。


 

华夏公益教科书