关于CSS中字号控制的兼容性研究[译]
作者:ximicc 来源:ximicc博客 发布时间:2009-02-24 16:35:00
过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式,涌现了很多与之相关的技术与理论资料,其中相当重要的一个领域就是关于印刷中字号和行高的精确控制。但问题是:网络是一个相当特殊的媒介,浏览者一设计者一样拥有几乎同等的控制权限,以文本为例,虽然其呈现方式很大程度上取决于设计者的意愿,但还是会在不同的浏览器或平台上存在或多或少的差异。
在本文中,我们将探讨在设计者意愿与用户需求之间,如何让文本的呈现方式取得一种平衡。为了达到这个目的,我们需要对传统的处理方法进行研究,反思其中的实践经验和不足。我在Owen Briggs的pioneering work基础上,总结分析了六大条目,配之以大约160张截图,希望能增进大家的理解和实践。
测试样本
用于测试的对象是两列Arial字体的文本,左侧我们视之为主内容,右侧为边栏。我们测试的平台和浏览器主要是MAC下的Safari 2, Firefox 2,Opera 9.5,以及开启ClearType效果的Windows XP下的IE6和IE7.每种平台或浏览器都以默认设置为运行环境,我们的测试主要是看看各个浏览器如何渲染其中的小、中、大、特大文本,以及在90%, 100%, 110%, 以及120%的缩放比例下具体效果如何。
首先很有必要来验证一下用于测试的浏览器在初始的情况下有着一致的标准,在基础例子中大家可以看到,各款浏览器中默认的文本字号都是16px,若对字号进行改变,文本的缩放也遵循着一致的标准。
PX单位字号文本 – iteration 1
虽然我们可以直接从基础示例中默认的字号着手讲解,但对于大多数人来说,16px的正文字号显得有点太大了。所以在我们的例子中,我们把正文字号重置为14px,侧边栏文本则是12px,CSS规则如下:
.bodytext p {
font-size:14px;
}
.sidenote {
font-size:12px;
}
在结果示例中可以看到,在Safari 和 Firefox中,文本会随着larger、largest的声明缩放其字号,但IE6和7则无动于衷。
EM单位字号文本 – iteration 2
虽然现今浏览器的市场份额在不断变化,但毋庸置疑的是很多的用户都还在使用IE6,所以px字号设置会将这些用户拒之于文本大小调整的门外。那么接下来我们尝试一下em字号,事实上em也是W3C推荐的印刷单位。如果要在默认的设置下利用em达到等同于14px和12px字号的文本大小,需要进行如下CSS声明:
.bodytext p {
font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
font-size:0.75em; /* 16x0.75=12 */
}
在结果示例中可以看到以em为字号单位的文本在各款浏览器中都能进行文本缩放,但是在IE6和7中缩放的幅度似乎有点夸张了。
猜你喜欢
- The WeekdayName function returns the weekday name of a specified day o
- 该域名查询系统写的很简单,只是实现了功能使用XmlHttp来获取远程查询结果,实际上就是小偷程序!相关推荐:域名注册情况查询/
- 1、终极方法:条件注释<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]
- 下面就来介绍一下这些在后台辛勤工作的进程们。系统检测器(System Monitor,SMON)、进程监视器(Process Monitor
- 你已经在上面取出w打头记录的例子中看到了LIKE的用法。LIKE判定词是一个非常有用的符号。不过,在很多情况下用了它可能会带给你太多的数据,
- Lightbox里面的一个函数,能把页面实际的高宽与浏览器可视面积的高宽保存在一个数组中..非常好用.什么是Lightbox?下载light
- 方案5 使用xml参数 对sql server xml类型参数不熟悉的童鞋需要先了解下XQuery概念,这里简单提下XQuery 是用来从
- 我们经常会用到表格数据,在做表格的时候,一般都喜欢隔行变色,使表格表现数据的时候非常的清晰。如图,我设计的一个表格表现的样式:在网上找到一个
- 流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能
- 最近为数据库服务器增加了内存,达到了最大支持的8G,数据库用的是mssql 2005 ,之前内存一直是4G的,不存在内存大和32位操作系统冲
- 很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示:其实这是 OpenSearch 的一个应用,只要编
- 存储过程采用的是select top 加 not in的方式完成,速度也算是相当快了 我测试过了百万级数据量一般查询在1秒一下,贴出来大家交
- 如何让页面超时并指定一个超时时间?下面就是利用缓冲的程序页面事例: <%@ OutputCache Du
- 下面发一个简单的在线调试服务端js代码的asp源码。并可以提示代码具体错误信息。<%@language="javascrip
- 信息图表设计(Inforgraphic Design),是信息设计(Information Design)学科的一个分支,它兴起于20世纪末
- 先由exp把数据卸出到文件系统, 产生一个.dmp文件, 然后必要时再由imp将数据装入数据库. 对于一般中小型数据库来说, 全数据库的ex
- zhanglunray 问:我在mzzx_pic这个层设置了左边距,在ie里显示是正常的,但是在ff里显示时margin-left却没有起到
- 最近项目中遇见 Jquery Ajax 缓存问题,load出来的页面状态有时正常,有时不对,记录一下,希望对大家有帮助使用jquery里lo
- 以用户为中心的设计、用户体验,这两个词现在在互联网上几乎随处可见,除了设计师外,很多的用户也都在说这两个词,于是我们经常会听到诸如“这里用户
- function createobj() { if (window.ActiveXObject)&n