跨浏览器的字体大小一致(Web 开发)
在创建网页时,我们如何实现跨浏览器的字体大小一致。 我在 CSS 中使用了类似 "font-size: 11pt; font-family: Helvetica,'Lucida Grande'"
的内容,但文本在 Firefox、IE、Google Chrome 和 Safari(以及这甚至不在不同的平台上)。 基本上在运行 Windows Vista 的同一台计算机上,我在不同的浏览器下获得不同的外观和感觉。
如何解决这个问题,以便文本大小在所有不同的浏览器上显示相同。
When creating web pages how do we achieve a consistent font size across browsers. I have used something like "font-size: 11pt; font-family: Helvetica,'Lucida Grande'"
in my CSS, but the text looks different in Firefox, IE, Google Chrome and Safari (and this is not even on different platforms). Basically on the same machine, that is running Windows Vista, I get a different look and feel under different browsers.
How can this be fixed so that the size of text appears same on all the different browsers.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您将需要使用 CSS Reset 来尝试在所有浏览器中获得一致的行为。
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
You will want to use a CSS Reset to attempt to get consistent behavior across all browsers.
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
使用 px(像素)而不是 pt(点)作为字体大小单位。 然后你将处理像素大小。
但请注意,具体取决于您的网站的使用方式。 (在美国)因“硬编码”字体大小而导致网站上的可访问性问题发生了诉讼。
Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.
Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.
对于主体文本,您不需要。 有些人想要更大的文字,这样他们可以更轻松地阅读; 妨碍他们,后果自负。 使用以“em”或“%”为单位的相对字体大小。
对于需要文本大小与屏幕上像素大小的元素相匹配的少量演示性文本,请使用“px”单位。 不要使用“pt”——这只对打印有意义,在屏幕上查看时它会或多或少随机调整大小。
您仍然无法获得完全相同大小的文本,因为不同平台的字体不同,而且 Lucida Grande 和 Helvetica 看起来当然也非常不同。
For main body text, you don't. Some people want bigger text so they can read it more easily; get in their way at your peril. Use relative font sizes in units such as ‘em’ or ‘%’.
For small amounts of presentational text where you need text size to match pixel-sized on-screen elements, use the ‘px’ unit. Don't use ‘pt’ - that only makes sense for printing, it'll resize more-or-less randomly when viewed on-screen.
You can still never get the text exactly the same size because fonts differ across platforms—and Lucida Grande and Helvetica look very different of course.
通过这两个设置,您可以获得完全相同的字体外观:
测试:IE9、Firefox、Google Chrome
With these two settings, you can reach exact same font appearance:
Tested: IE9, Firefox, Google Chrome
这是一个非答案,因为有很多方法可以实现您所需要的,但我不太熟悉它们。 从 blueprint 等框架通常提供的“重置”开始,然后从那里开始。
让设计足够灵活通常会更容易、更明智,这样浏览器之间的微小差异就不会产生太大的影响。
This is a non-answer, as there are ways to achieve what you need, but i'm not too well-versed in them. Start with the "reset" that frameworks like blueprint usually provide and go from there.
It is usually much easier and smarter to have designs be flexible enough so that the small differences across browsers don't play too big a role.