Mac / PC上的字体渲染/行高问题（元素外）
该devise
信息小部件的内容应该在中间垂直alignment，如下所示：
编码devise
Windows：Chrome 20 / FF 14 / IE 9
Mac（Lion / Mt. Lion）：Chrome / FF
代码
HTML
<div class="info"> <div class="weather display clearfix"> <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div> <div class="fl"> <p class="temperature">82° / 89°</p> <p class="conditions">Thunderstorms</p> </div> </div> <div class="time display"> <p>11:59 <span>AM</span></p> </div> <div class="date display clearfix"> <p class="number fl">23</p> <p class="month-day fl">Jun <br />Sat</p> </div> </div><!-- //.info --> CSS
.info { display:table; border-spacing:20px 0; margin-right:-20px; padding:6px 0 0; } .display { background-color:rgba(255, 255, 255, .2); border-radius:10px; -ms-border-radius:10px; color:#fff; font-family:"Cutive", Arial, sans-serif; display:table-cell; height:70px; vertical-align:middle; padding:3px 15px 0; } .display p {padding:0;line-height:1em;} .time, .date {padding-top:5px;} .time p, .date .number {font-size:35px;} .time span, .display .month-day, .conditions { font-size:14px; text-transform:uppercase; font-family:"Maven Pro", Arial, sans-serif; line-height:1.15em; font-weight:500; } .display .month-day {padding-left:5px;} .icon {float:left;padding:0 12px 0 0} .display .temperature {font-size:24px;padding:4px 0 0;} .display .conditions {text-transform:none;padding:2px 0 0;} .lt-ie9 .display { /* IE rgba Fallback */ background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff); zoom:1; }
问题
看看上面的编码devise的图像，你可以看到如何摆脱alignment。 进一步查看后，文本将在Mac上的元素之外呈现。
视窗
苹果电脑
注意
我正在通过Google Web Fonts样式表embedded字体。
经testing
我已经尝试了以下内容：
- 在每个元素上设置行高。
- 在每个元素上设置字体权重。
- 设置每个元素的高度。
- 每个元素的高度/填充顶部的组合。
- 用于填充的百分比/ em / px。
看来，无论我尝试什么，内容将永远无法完全跨Mac和PCalignment。
我的问题
可以通过简单的方式来实现我想要做的事情吗？
我应该放弃display:table-cell; 路线和设置每个元素和孩子的具体高度/填充？ 我仍然会遇到两个操作系统之间的填充/间隔问题。
我应该怎样把这个问题归类？ LINE-HEIGHT？ 表细胞？ OS？ 等等…
提前致谢！
如果通过使用不同的字体（Arial）解决问题是与字体，而不是与CSS的问题。 正如你已经注意到浏览器的字体渲染不同。
一个可能的解决scheme可能是下载Cutive字体（我看到它有一个SIL许可证），然后通过字体松鼠font-face生成器运行它。 在“专家”模式下，可以select“修复垂直度量”，这可能是您正在寻找的。
我对这个（非常恼人的问题）的解决scheme：
-
将所有元素设置为float：left;
-
设置明确的线条高度;
享受跨浏览器/平台CSS的荒谬胜利。
我遇到了一个为客户的品牌创build的自定义字体的问题。 我在Font Forge中打开TTF字体。 我创build一致性的方式是调整Element-> Font Info-> OS / 2-> Metrics中的值。
Win Ascent / Descent值的运行方式与其他值不同。 我有以下值：
Win Ascent: 1000
Win Descent: 0
Typo Ascent: 750
Typo Descent: -250
HHead Ascent: 750
HHead Descent: -250
我将Win Ascent和Descent值更改为：
Win Ascent: 750
Win Descent: 250 （注意正值）
看来你需要匹配的值除了在我的情况下，我需要反转Win Descent的值为正值。
我对字体的知识非常有限，但这确实解决了我的问题。 我生成TTF字体，然后通过networking字体生成器运行它。 字体现在在Mac / Windows 7 / Android / iOS上呈现相同。
希望这有助于某人。
部分问题可能是Windows / Mac OSX呈现字体的方式。 特别是那些通过@ font-face引入的。 你有没有尝试过使用哪种字体格式？
我目睹了与FastFonts服务的自定义字体（贸易哥特式）相同的问题。
Windows做了它应该有的。 但是基于Linux的机器，Mac，iOS和Android上的所有其他浏览器都遭遇了这个问题。
我唯一的解决scheme是在用户代理上进行匹配，并使用.not-win命名空间body标签
然后，我的样式可以覆盖特定于非Windows设备的行高。
既然你在你对Jordan Brown的评论中说过使用Arial使得alignment完美，这是一个字体问题。 创build字体的人可能没有正确设置Ascent值。
如果你有TTF，把它上传到FontSquirrel ，select“专家”选项，然后保留所有默认选项。 修复它的那个我认为是“Fix Vertical Metrics”。 但是在更改默认值时我遇到了问题，所以我build议保持原样。
现在字体行高度在MAC和PC上呈现相同的效果（对我来说）。
Mac正确显示基线以下的长度属于行高。 看来，OS X自下而上，而Windows从顶部计算。
由于1em是所用字体的大写字母M的宽度，所以它通常小于字体的整体高度。
你有没有尝试设置线高度是相同的元素高度？ 这通常有助于解决这些问题。
这是由字体格式历史和Windows / Mac的战争造成的，有不同的方式来计算行高，如果他们没有同步你使用的字体在某些系统上会出错
您需要修复您的字体（如果许可证允许）或切换到没有这个问题
看到http://www.webfonts.info/node/330 （警告，即使技术信息是真的，这是一个电视购物）
更好的是，不要让你的devise在这里取决于一个确切的价值
我也遇到过这个问题。 卢克的回答帮助了我。 我不得不用FontForge调整字体使用这个设置：
取消勾选所有“偏移量”checkbox以及“真正使用错字度量”checkbox。 我遇到了很多Firefox和IE的问题。 玩“下降”的价值固定它为这两个浏览器。
