关于CSS中字号控制的兼容性研究[译](3)
作者:ximicc 来源:ximicc博客 发布时间:2009-02-24 16:35:00
标签:兼容,字体,浏览器,css
用EM设置行高 – iteration 5
既然px不适合,我们接着来尝试一下em单位,设定如下CSS规则:
body {
font-size:100%;
line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
所得到的结果在各方面都正如我们期待的一样,近乎完美。
Safari 中等距字体的问题 – iteration 6
细心的人可能会发现,在Safari浏览器下主体文本中等距字体文本在渲染上存在一些细微的差别:当字号以px为单位时,等距文本的宽度与其它文本没有很大的区别,但是当字号以em为单位时,等距文本的宽度就要小多了。这个问题的根源在于Safari缺省设置中,普通字体的字号为16px,而等距字体的字号则是13px。
英文有那么多字体, 但都隶属于serif, sans-serif和monospace三种字组. 由于英文本身的特点, 不同于方块字(汉字), 英文字母的宽度是不相等的, 这就给出版业如报纸的排版工作增加了难度, 于是发明了等距字体(monospace).
也许有些人会觉得这个问题无关紧要,但大部分人不会放弃对这些细节的追求。那么下面就是一个可行的解决方案,注意其中的[if !IE]语法,它表示IE6和7将忽略表示其后的规则:
<style type="text/css">
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
上面的规则把px字号应用到了除IE6和7的其它浏览器上,结果示例中可以看到现在所有的浏览器下行高与字号之间都有了很好的缩放协调,包括Safari中的等距文本。
对于这种类似于Hack的方法存在很多争议,但个人认为在这里运用它没有什么不妥当,毕竟我们只是利用浏览器特性来矫正其元素渲染的处理方式而已。另外本例中的CSS都是内联式的,最好的方式当然是外联样式。
英语原文地址:How to Size Text in CSS
0
投稿
猜你喜欢
- 从MySQL 5.0.2开始,通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 这个验证类的完成有很长时间了,一直没有分享给大家使用了这么长时间之后感觉挺顺手,用于一些不需要特殊效果的表单验证个人认为已经足够了,还是挺好
- 今天我们看看所有的类!由于工作的上的事有点忙!点图!以后讲解这是我编译好了的类的结构图,我们可以用很多软件可以从原板的DLL看到这些内容!当
- 一个网站的导航就相当于是一条路的路标,不同的是,网站的不同栏目页的入口远远比马路要来得复杂,所以一个清晰的导航设计对于一个网站的意义远远大于
- 我其实是同一天看到Robert Treat几人整理的”Mysql 迁移到Oracle前需要了解的50件事“与Baron Schwartz的”
- JavaScript中的64位加密及解密的两个方法。function base64Encode(text){if (/(
- 在ACCESS中更改控件的默认属性 Lisa Friedrichsen, 欧弗兰帕克,堪萨斯州 如果您在设计一个Microsoft ACCE
- asp过滤留言中脏话的代码例子<!--#include file="../conn/dbconn1.asp"--&
- 微软的SQL Server 2005中用来替代数据传输服务(DTS)的SQL Server综合服务(SSIS),包含了很多工具用于导入数据并
- 介绍分面是指事物的多维度属性。例如一本书包含主题、作者、年代等分面。而分面搜索是指通过事物的这些属性不断筛选、过滤搜索结果的方法。可以将分面
- 如何让你的CSS代码更具有组织性和易维护性,为什么你的样式表总是臃肿和混乱的?有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维
- 代码如下:--函数 CREATE function fn_GetPy(@str nvarchar(4000)) returns nvarch
- ASP链接MSSQL2005的链接字符串如下:Provider=SQLNCLI;Server=.\SQLEXPRESS;Database=m
- 如果你用ODBC connection (DSN or DSN-less)来访问远端的(UNC path)数据库, OLEDB会出现以下错误
- Demo里的三种方法:方法1是两层div,兼容FF3.1a+, Safari 3+, Chrome, IE6/7方法2是两层div,除了IE
- 由于系统自带的MySQL默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过程
- 今天看到某人博客推荐了http://dragoninteractive.com/这个网站,貌似一些效果做的比较不错,于是打开了看看,不过还真
- 上次我重新修改了UBB的转换后,又很多朋友反映日文显示的时候出错了。我在本地测试了一下,结果出现了 Invalid procedure ca
- <% a="福建是中国的一个省|我们美丽中国的武夷山!" b="中国,我们,武夷山,福建,美国,苹果&q
- 往往我们在建立一个较为大型的网站的时候会有很多的副页面框架模式甚至一些小的细节元素都是相同的,但是令人困扰的是在更新它们时却要费些周折,要一