Exact same CSS font taking more space in Safari

问题

I'm using this CSS to style a div:

#mainSection .mainArticle .text {
    width: 600px;
    margin-top: 0px;
    margin-left: 20px;
    line-height: 26px;
    color: white;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

The image below shows the difference between Safari and Chrome:

enter image description here

I can't tell why it's this different. The font looks 'bolder' in Chrome, yet each character takes an tiny bigger length in Safari, meaning it sticks on average less chars on each line. Because the div box size is fixed length, the result is that the text ends too close to the bottom border.

I can't have variable length boxes. You can see the site here (go to MENTORING section): enter link description here

Is there a convenient way around this problem? I know the font engine is different for each browser...

回答1:

i think it is because the browser size is not same for all the browsers, and you have defined your CSS in terms of pixels., try to convert from pixels(px) to percentage(%) or em/rem values.

i hope this helps.

回答2:

Safari renders open sans bolder than in chrome so you would need to apply a lighter font weight for safari Open Sans Google Web Fonts Rendering in Chrome

回答3:

The reason is that whereas other browsers render the font at the exact size specified, Safari renders at a series of jumps in size.

I assume that the point is that fonts rendered at 10.3px look better than fonts that are rendered at 10.0px. (Those are made up values, but you get the point).

The consequence is that you can get different results between Safari and other browsers.

The easiest way to see this in action is to define a font size as a percentage, then slowly resize the window:

Test page at Ozake.com

In other browsers, the font will resize smoothly with the window. In Safari, the font size will stay the same, then jump to a new size, then stay the same etc.

I am looking for a workaround for this (help, somebody!) because this behavior is screwing up my layouts and making it look like I have spelling errors at Ozake.com.

来源：https://stackoverflow.com/questions/24101591/exact-same-css-font-taking-more-space-in-safari

标签

css

google-chrome

safari