帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:尺寸  Usability  字体大小  font  REL  相对  


假设

本文假设你知道如何使用CSS和 HTML。 如果你不确定CSS或者HTML的工作方式,那么我建议你在continuining之前阅读关于CP的其他文章。

此外,任何真正的网页设计师可能会爆炸和启动frothing在reading阅读本文。 所以请不要阅读,把文章交给你的可用性"专家"或者网络编码器。

relative 字体大小?

尝试这样:访问 useit.com/alertbox/插件,然后在中单击视图菜单,文本大小,然后将它的放置到最大或者最小的位置。 可以看到页面上几乎所有元素的文本大小已经改变。 这是好的可用性和良好的可以访问性。

如果你的网站没有这么做,那么你可能会在成千上万的访问者上 loosing。 据估计,英国所有网络用户至少有 10%被认为是以一种方式或者另一种方式禁用。 图中的大部分都包含"视力不佳"禁用的类别。 所以如果在英国有 100个网络用户完全无法使用你的网站,那么无法购买你的产品,也无法发现你的产品。 你的事业能不能?

那么接下来发生了什么? 如何为这些禁用的用户提供帮助,并让他们回到你的网站? useit.com 正在使用CSS和浏览器的relative 字体大小功能。 它使用户手中的功能能力,让他们选择他们想要查看你的网站的字体大小。 有些用户无法读取大小 11px 文本,不管它有多酷,或者它是如何使用字体大小的。

使用 relative 字体大小调整,你可以在特定级别指定字体大小。 当用户更改它的文本大小级别时,所有字体大小都将 relative 更改为它的选定的级别。 你失去控制,至少不相对。

但是你所获得的比精确的几个像素要重要得多。

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

* 请注意,本文目标是 IE。 不久以后我将把 Highlight。IE 和 Opera 之间的跨浏览器 差异更新为。

你必须用什么

你有 7种不同的relative 字体大小可以用于。 它们不使用点( pt )。像素( px ) 或者百分比( % ) 来设置字体大小。 相反,你可以使用:

  • xx小
  • x-小
  • 介质
  • x-大
  • xx大

所以在CSS文件( 我强烈反对 inline CSS样式) 而不是 font-size: 10px; 中,你可以使用 font-size: xx-small;

这为你提供了很好的字体大小。 在下载 上面 中,我包含了一个"相对字体大小图表"( relativefontsize_fontsizechart。asp ) 页面,它显示了 relative 字体大小及其等价的像素大小。 在将基于px的站点转换为 relative 字体大小时很有用。 例如在文本大小的IE 上,medium xx小于 10px 和xx等效于 48个像素。

例如这是xx小,这是 10个。 这是xx大,这是 48像素。 如果浏览器设置为文本大小 medium,那么xx小将匹配 10px 和xx大将匹配 48像素。 现在尝试将文本大小设置为最大或者最小。 请注意xx和xx大的变化,但 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> 
 <Pclass="articlehead">Visual Basic Trounces C++</P><Pclass="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><Pclass="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><Pclass="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><Pclass="articleauthor">by Pablo Picasso</P></BODY></HTML>

* 是,我使用了 inline CSS。 只是为了保持简单。

剪切并粘贴到HTML页面( 或者查看下载中包含的页面: 示例。asp ) 并在浏览器中查看。 通过改变文本大小你会看到整个文章增长或者缩小以满足用户的愿望。 maybe可能在文章底部的作者name的名字太小,无法在文本大小上阅读。 现在用户可以轻松地增加文本大小,并能够读取作者的名字。

自然这是一个简单的例子,但是 relative 字体大小很容易理解和使用。

结论&注释

所以 relative的字体大小不是那么难。 你所需要做的就是把你现有的网站和你当前的字体大小匹配到 relative 字体大小声明。 如果你使用 font-size: 11px;,那么你就找不到完全匹配的。 在这种情况下,用xx小或者x 小。 正如我所说,真正的设计师将爆炸并开始泡沫,但是对于真实的世界应用和可以用性。

本文中没有介绍的内容实际上是 跨浏览器 兼容性的难点和令人沮丧的话题。 在Netscape中,small小的呈现方式与 IE 中的小。 所有其他 relative 字体大小相同。 但是你可能已经猜到了。 也不应总是使用 relative 字体大小。 例如,如果你有一个导航栏严格限制,那么使用 relative 字体大小可能会导致导航栏严重出错。 在这种情况下,选择足够大的字体,并使用像素进行编码。

但是 跨浏览器 问题和不使用 relative 字体大小调整将在下一篇文章中讨论。

好运,高速,一旦你开始使用 relative 字体大小,会喜欢你。 你可能会被邀请到他家去找 cuppa: eek:



文章标签:REL  font  尺寸  相对  字体大小  Usability  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语