跨浏览器的一致字体大小(Web开发)

时间:2009-02-06 19:36:21

标签: css fonts font-size

创建网页时,我们如何跨浏览器实现一致的字体大小。我在CSS中使用了类似"font-size: 11pt; font-family: Helvetica,'Lucida Grande'"的内容,但Firefox,IE,Google Chrome和Safari中的文字看起来有所不同(甚至在不同的平台上也没有)。基本上在运行Windows Vista的同一台机器上,我在不同的浏览器下获得了不同的外观和感觉。

如何解决这个问题,以便所有不同浏览器上的文字大小相同。

5 个答案:

答案 0 :(得分:15)

您将需要使用CSS重置来尝试在所有浏览器中获得一致的行为。

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

答案 1 :(得分:7)

使用px(像素)代替pt(点)作为字体大小单位。然后你将处理像素大小。

请注意,具体取决于您的网站使用方式。由于“硬编码”字体大小导致网站上的可访问性问题已经在美国提起过诉讼(在美国)。

答案 2 :(得分:7)

  

创建网页时,我们如何在浏览器中实现一致的字体大小

对于正文文本,您没有。有些人想要更大的文字,这样他们就可以更容易地阅读;克服自己的危险。使用相对字体大小,例如'em'或'%'。

对于需要文本大小以匹配像素大小的屏幕元素的少量表示文本,请使用“px”单位。不要使用'pt' - 只对打印有意义,它会在屏幕上查看时或多或少地随机调整大小。

你仍然无法获得完全相同大小的文字,因为不同平台的字体不同 - 当然Lucida Grande和Helvetica看起来非常不同。

答案 3 :(得分:3)

使用这两个设置,您可以达到完全相同的字体外观:

font-size: 70%; // better than px

line-height: 110%; // required to make line heights the same

经过测试:IE9,Firefox,谷歌浏览器

答案 4 :(得分:1)

这是一个非答案,因为有办法实现你所需要的,但我并不太熟悉它们。从“重置”开始,像blueprint这样的框架通常提供并从那里开始。

设计足够灵活通常会更加容易和智能,因此浏览器之间的微小差异不会发挥太大的作用。