关于CSS中字号控制的兼容性研究
来源:西米CC 发布时间:2010-01-23 12:48: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中缩放的幅度似乎有点夸张了。
BODY中的百分比字号– iteration 3
对于在第二个测试中IE6和7所出现的问题,我们可以通过设置body标签的百分比字号来解决,当然对于其它元素的文本还是沿用em单位字号:
body {
font-size:100%;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
示例中可以看到,我们已经基本达成了文本缩放一致的目的。
猜你喜欢
- CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来
- 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Fire
- 看过一篇关于下载网页中图片的文章,它只能下载以http头的图片,我做了些改进,可以下载网页中的所有连接资源,并按照网页中的目录结构建立本地目
- 平面设计 常用尺寸 三折页广告 标准尺寸: (A4)210mm x 285mm普通宣传册 标准尺寸: (A4)210mm x 285mm文件
- 很多时候关心的是优化SELECT 查询,因为它们是最常用的查询,而且确定怎样优化它们并不总是直截了当。相对来说,将数据装入数据库是直截了当的
- SQL的扩展的删除与恢复 删除 代码如下:use master exec spdropextendedproc “xpcmdshell“ e
- 弄个随机数的东西,直接从网上找了一个现成的,简单看了两眼,感觉算法应该是对的,但今天测试下来,是不对的;网上大多数人用的写法是这样的:fun
- 一直以来,每次调用Ajax方法都需要创建一次 Microsoft.XMLHTTP 对象,今天在使用Ajax技术做一个类似聊天室的
- 从人类认知的角度的看,人类擅长识别并不擅长于记忆,当一个用户面对浩瀚的信息海洋,通常会产生畏惧感,会本能的对这些信息片段进行加工找出其内在的
- chat.html <html> <head><title>asp之家-简单聊天&l
- 最近对 Range 和 Selection 比较感兴趣。基本非 IE 的浏览器都支持 DOM Level2 中的 Range,而 IE 中仅
- 我准备在ASP中连接MYSQL了,请问如何做?首先要正确安装MYSQLX,装好之后,可调用以下程序即可正常访问MYSQL:<%@&nb
- 在大型的ASP项目中,很多的页面都涉及到分页、翻页功能。如果每个页面都写一个翻页的程序的话,这样的工作即降低了工作效率,也不利于工程的模块化
- 在一开始接触PHP接触MYSQL的时候就听不少人说:“MySQL就跑跑一天几十万IP的小站还可以,要是几百万IP就不行了
- 生成HTML方法主要步骤只有两个:一、获取要生成的html文件的内容二、将获取的html文件内容保存为html文件我在这里主要说明的只是第一
- 使用cookie来判断来访者身份,是否是首次登陆, asp代码实例如下:< %@ LANGUAGE=&q
- 我们可以利用err对象来判断。当程序没有出现错误就说明已经执行了sql操作: sql="insert into
- 一.雅黑设计理念 雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更
- 我们平常在网页上显示的字体最小一般是12PX,当小于10PX时,显示的效果就大打折扣了,因为中文默认的字体是宋体,当小于12PX时的效果如下
- 啥都不说了,直接奉献原代码 代码如下:'==========注意==================================