Mac / PC上的字体渲染/行高问题(元素外)

该devise

信息小部件的内容应该在中间垂直alignment,如下所示:

原始PSD设计


编码devise

Windows:Chrome 20 / FF 14 / IE 9

Windows编码设计

Mac(Lion / Mt. Lion):Chrome / FF

Mac编码设计


代码

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&deg; / 89&deg;</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上的元素之外呈现。

视窗

Windows编码设计对齐

苹果电脑

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调整字体使用这个设置:

FontForge设置

取消勾选所有“偏移量”checkbox以及“真正使用错字度量”checkbox。 我遇到了很多Firefox和IE的问题。 玩“下降”的价值固定它为这两个浏览器。