65.9K
CodeProject 正在变化。 阅读更多。
Home

可用性 101：使用相对字体大小

Paul Watson
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.38/5 (5投票s)

2001 年 12 月 12 日

5分钟阅读

viewsIcon

138336

downloadIcon

378

在您的网站中使用相对字体大小将确保您的网站对于视力不佳的用户来说是可访问的。本文将解释如何有效使用相对字体大小。

假设

本文假定您知道如何使用 CSS 和 HTML。如果您不确定 CSS 或 HTML 的工作原理，我建议您在继续之前阅读 CP 上的其他文章。

此外，任何真正的网页设计师在阅读本文后可能会爆炸并开始口吐白沫。因此，请停止阅读，并将文章交给您的可用性“专家”或网页程序员。

为什么使用相对字体大小？

尝试一下：访问 useit.com/alertbox/，然后在 Internet Explorer 中，单击“视图”菜单，“文本大小”，然后将其设置为“最大”或“最小”。如您所见，页面上几乎所有元素的文本大小都已更改。这是良好的可用性和良好的可访问性。

如果您的网站不这样做，那么您可能会损失数万甚至数十万的访问者。据估计，仅在英国，所有网络用户中至少有 10% 被认为在某种程度上存在残疾。这个数字中的绝大多数涵盖了“视力不佳”的残疾类别。因此，如果英国有 100,000 名网络用户，就有 10,000 名用户无法使用您的网站，无法购买您的产品，也无法了解您。您的企业能承担这样的损失吗？

那么，到底是怎么回事呢？您如何才能满足这些残疾用户的需求并让他们继续访问您的网站？useit.com 正在使用 CSS 和您的浏览器的相对字体大小功能。它将个性化的权力交给了用户，让他们选择以何种字体大小来查看您的网站。有些用户无法阅读 11px 的文本，无论这种字体大小有多么酷或多么易于使用。

使用相对字体大小，您可以指定特定级别的字体大小。当用户更改其文本大小级别时，您的所有字体大小都会相对于他们选择的级别进行更改。您不会失去任何控制，至少在相对意义上不会。

然而，您所获得的收益远远超过了几个像素的精度。

本文将介绍如何开发一个使用相对字体大小的网站。

* 请注意，本文针对的是 Internet Explorer。不久的将来，我将更新它以强调 Netscape、IE 和 Opera 之间的跨浏览器差异。

您需要处理的内容

您有 7 种不同的相对字体大小可供选择。它们不使用点 (pt)、像素 (px) 或百分比 (%) 来设置字体大小。相反，您使用的是

  • 超小
  • 小
  • small
  • medium
  • large
  • 大
  • 超大

因此，在您的 CSS 文件中（我强烈反对内联 CSS 样式），而不是使用 font-size: 10px;，您将使用 font-size: xx-small;。

这为您提供了一个不错的字体大小范围。在上面的下载中，我包含了一个“相对字体大小图表”（relativefontsize_fontsizechart.asp）页面，其中显示了相对字体大小及其等效像素大小。这在将基于像素的站点转换为相对字体大小时非常有用。例如，在 IE 的“文本大小”设置为“中等”时，xx-small 相当于 10px，xx-large 相当于 48px。

例如，这是 超小，这是 10px。这是 超大，这是 48px。如果您的浏览器设置为“文本大小”为“中等”，则 xx-small 将匹配 10px，xx-large 将匹配 48px。现在尝试将“文本大小”设置为“最大”或“最小”。请注意，xx-small 和 xx-large 如何变化，而 10px 和 48px 保持不变。

一个示例

理论性的胡言乱语够了。您想看一个真实的例子

<HTML>
    <HEAD>
        <TITLE>An Example of Relative Font Sizes</TITLE>
        <STYLE>
            body
            {
                font-family: verdana;
                font-size: medium;                    
            }
            
            p {width: 450px;}
                
            .articlehead {font-size: x-large;}
            
            .articlblurb {font-size: medium;}
            
            .articleauthor {font-size: x-small;}
            
            .articlebody {font-size: small;}                        
        </STYLE>
    </HEAD>
    <BODY>    
    <P class="articlehead">Visual Basic Trounces C++</P>
    <P class="articleblurb">
        In an amazing demonstration Captain VB demonstrated the power, ease and 
        flexibility of Visual Basic. In real world applications VB proved to be 
        more robust, scalable and efficient than even the ex-king of the hill 
        language, C++.
    </P>
    <P class="articlebody">
        John Simmons and Chris Maunder were flabergasted after the presentation 
        and a few hours of tinkering by themselves. "It is amazing, I am going 
        to go out and buy VB right now!" said a starry eyed Chris Maunder. John 
        Simmons even apologised to all the VB users he has previously berated 
        for using VB. "It seems as though <b>I</b> was the one in the dark and 
        they had found the light!" 
        exclaimed John.
    </P>
    <P class="articlebody">
        "Reports of CodeProject.com being converted to run on VB are not at all 
        exaggerated" said a source close to the heart of CP.
    </P>
    <P class="articleauthor">by Pablo Picasso</P>
    </BODY>
</HTML>

* 是的，我使用了内联 CSS。只是为了使示例简单化。

将此代码剪切并粘贴到 HTML 页面中（或查看下载中包含的页面：example.asp）并在浏览器中查看它。通过更改您的“文本大小”，您将看到整个文章根据用户的意愿变大或缩小。也许在“中等”大小下，文章底部的作者名字 Pablo Picasso 太小了，无法阅读。现在用户可以轻松地增加“文本大小”，从而能够阅读作者的名字。

当然，这是一个简单的例子，但相对字体大小易于理解和使用。

结论和说明

所以，相对字体大小实际上并不难。您所需要做的就是采用您现有的站点，并将您当前的字体大小与相对字体大小声明进行匹配。当然，如果您使用 font-size: 11px;，那么您找不到完全匹配的。在这种情况下，请选择 xx-small 或 x-small。正如我所说，真正的设计师会爆炸并开始口吐白沫，但对于实际应用和可用性来说，这种牺牲是值得的。

我在这篇文章中没有涵盖的内容实际上被证明是跨浏览器兼容性这个困难且令人沮丧的话题。您会发现在 Netscape 中，xx-small 的渲染方式与 Internet Explorer 中的 xx-small 不同。其他相对字体大小也是如此。但您可能已经猜到了。此外，您不应总是使用相对字体大小。例如，如果您有一个非常紧凑的导航栏，那么使用相对字体大小可能会导致您的导航栏严重失常。在这种情况下，选择足够大的字体以使其可读，并使用像素进行编码。

然而，跨浏览器问题以及何时不使用相对字体大小将在下一篇文章中进行介绍。

祝您好运，一路顺风，一旦您开始使用相对字体大小，Jakob Nielsen 会爱死您的。您甚至可能被邀请到他家喝杯茶 :eek

© . All rights reserved.