Mac/PC上的字体渲染/行高问题(元素外部)
设计
信息小部件的内容应该在中间垂直对齐，如下所示：
编码式设计
Windows: Chrome 20 / FF 14 / IE 9
Mac (狮子/ 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;
} 问题所在
看看上面的编码设计的图像，你可以看到看起来是如何偏离对齐的。在进一步查看时，文本将呈现在mac上的元素之外。
视窗
Mac
备注
我通过Google Web fonts样式表嵌入字体。
已测试
我尝试过以下几种方法：
- 设置每个元素的行高。
- 设置每个元素的字体粗细。
- 设置每个元素的高度。
- 每个填充百分比/em/px上的高度/padding-top组合。
< element.
- Used >F218
似乎无论我怎么尝试，内容永远不会在mac和pc上完全居中对齐。
我的问题
有没有可能以一种简单化的方式实现我想要做的事情？
我应该放弃display:table-cell;路线，在每个元素和子元素上设置特定的高度/填充吗？我仍然会遇到两个操作系统之间的填充/间距问题。
我应该将这个问题归入什么类别？行高？表格单元格？操作系统？等等。
提前感谢！
回答 11
Stack Overflow用户
发布于 2013-04-07 16:19:33
如果使用不同的字体(Arial)解决此问题，则问题出在字体，而不是CSS。正如您已经注意到的，不同浏览器的字体呈现是不同的。
一种可能的解决方案是下载Cutive字体(我看到它有SIL许可证)，然后通过font Squirrel font-face生成器运行它。在"Expert“模式下，有一个"Fix Vertical Metrics”选项，这可能就是您正在寻找的。
Stack Overflow用户
发布于 2016-07-21 23:22:23
我在为客户的品牌创建的自定义字体中遇到了这个问题。我在font Forge中打开了TTF字体。我使用渲染创建统一性的方法是调整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和Densent值更改为：
Win Ascent: 750
Win Descent: 250 (注意正值)
似乎您需要匹配这些值，除了在我的例子中，我需要将Win Descent的值反转为正值。
我对字体的了解非常有限，但这确实解决了我的问题。我将字体生成为TTF，然后通过web字体生成器运行它。字体现在在Mac/Windows7/Android/iOS上呈现相同的效果。
希望这对某些人有帮助。
Stack Overflow用户
发布于 2014-04-29 15:30:23
我对这个(非常烦人的问题)的解决方案是：
将所有元素设置为显式行高；
享受跨浏览器/平台css荒谬的胜利吧。
https://stackoverflow.com/questions/11726442
复制相似问题