Consistent font-size across browsers (web development)

前提是你 提交于 2019-12-17 16:19:00

问题


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.


回答1:


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.




回答2:


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/




回答3:


When creating web pages how do we achieve a consistent font size across browsers

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.




回答4:


With these two settings, you can reach exact same font appearance:

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

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

Tested: IE9, Firefox, Google Chrome




回答5:


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.



来源:https://stackoverflow.com/questions/521832/consistent-font-size-across-browsers-web-development

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!