Helvetica Neue基线渲染问题与Firefox / Mac [英] Helvetica Neue baseline rendering problem with Firefox/Mac
问题描述
考虑这个HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height:20px;
font-size:14px;
}
.a {
float:left;
}
.b {
font-weight:bold;
}
</style>
</head>
<body>
<div class="a">something1</div>
<div class="a b">something2</div>
</body>
</html>
在所有浏览器上，但是Firefox / Mac，它正确呈现，即粗体和非粗体文本
On all browsers but Firefox/Mac, it renders correctly, i.e bold and non-bold text are on the same baseline.
在Firefox / Mac上，粗体和非粗体文本之间的基线差异为1像素。请参阅下面的屏幕截图。左侧是Safari 3.2.3，右侧是Firefox 3.0.10。
On Firefox/Mac, there is a 1px baseline difference between the bold and non-bold texts. See below for screenshot. Left is Safari 3.2.3, right is Firefox 3.0.10.
alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png
有任何解决方法例如用一些CSS，除了在角落里安静地哭泣，并使用Arial（我不想做 - 我会留在Helvetica Neue如果我可以）。
Is there any way to fix this e.g with some CSS, other than to go quietly cry in the corner and use Arial (which I'd not want to do — I'd stay with Helvetica Neue if I could).
推荐答案
定位行高可以解决这个问题，但不知道是否是罪魁祸首。如果你有CSSEdit（或刷新很多），你可以通过一次增加行高1px来观察行为。
Targeting the line-height can fix this, but not sure if it's the culprit. If you have CSSEdit (or refresh a lot) you can watch the behavior by incrementing the line-height 1px at a time.
font-size 14px使它几乎不可能。 FF会将粗体元素的1个像素下降到某些行高，safari会将它落在确切的对立面！ （例如，行高20px的safari会下降粗体1像素，而firefox正常显示，与你的问题相反）。
The font-size 14px makes it near impossible. FF will drop the bold element 1 pixel at some line-heights and safari will drop it at the exact opposites! (i.e. line-height 20px safari drops the bold 1 pixel while firefox renders normally, the opposite of your problem).
像素线高，两者呈现相同。但是一个3像素的行高是奇怪的，你可能需要适应通过调整margin-top如果它upof你的布局。
Except at a 3 pixel line-height, both render the same. But a 3 pixel line-height is strange, you may need to accommodate by adjusting the margin-top if it goofs up your layout.
body {
font: 14px "Helvetica Neue";
}
.b {
font-weight: bold;
}
.a {
line-height: 3px;
float: left;
margin-top: 9px;
}
在一个13px的字体大小，一切都呈现相同的在21px
At a font-size of 13px everything renders the same in both at a 21px line-height (which is closer to a regular line-height.
使用不同的字体大小和行高我相信你会找到你需要的
Playing with different font-sizes and line-heights I'm sure you'll find what you need.
或者，如果你是这样滚动的：
Or hack it, if that's how you roll:
body {
font: 14px "Helvetica Neue";
}
.b {
font-weight: bold;
}
.a {
line-height: 21px;
float: left;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
.a {
line-height: 20px;
}
}
这篇关于Helvetica Neue基线渲染问题与Firefox / Mac的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
