Html Mac/PC上的字体渲染/行高问题（元素外部） 设计 信息窗口内容应在中间垂直对齐：

---

编码设计 Windows:Chrome 20/FF 14/IE 9

Mac（狮子座/狮子山）：铬合金/FF

---

代码 HTML

---

问题 查看上述编码设计的图像，您可以看到显示如何偏离对齐。进一步查看后，文本将在mac上的元素外部呈现

窗户

雨衣

---

注 我通过谷歌网页字体样式表嵌入字体

---

测试 我尝试了以下方法：

• 在每个元素上设置线条高度
• 设置每个元素的字体权重
• 设置每个元素的高度
• 每个元素上的高度/填充顶部的组合
• 使用百分比/em/px进行填充

似乎无论我怎么做，内容都不会在mac和pc上完全对齐

---

我的问题 有可能以一种简单化的方式实现我想要做的事情吗

我是否应该放弃

显示：表格单元格在每个元件和子元件上布线并设置特定高度/填充物？我仍然会遇到两个操作系统之间的填充/间距问题

我应该把这个问题归为什么类别？线条高度？表格单元格？操作系统？等等

提前感谢
问题的一部分可能在于Windows/Mac OSX呈现字体的方式。特别是通过@font-face引入的。您是否尝试过切换正在使用的字体格式？
Mac会将基线以下的长度正确显示为属于行高。似乎OSX是从下至上计算的，而Windows是从上至上计算的

由于1em是所用字体大写字母M的宽度，因此通常小于字体的总高度

您是否尝试将线条高度设置为与元素高度相同？这通常有助于解决此类问题。
如果通过使用不同的字体（Arial）来解决，那么问题在于字体，而不是CSS。正如您所注意到的，不同浏览器的字体呈现方式不同

一个可能的解决方案是下载Cutive字体（我看到它有SIL许可证），然后通过font Squirrel字体面生成器运行它。在“专家”模式下，有一个选项可以“修复垂直度量”，这可能正是您想要的。
我也看到了同样的问题，FastFonts提供了自定义字体（Trade Gothic）

Windows做了它应该做的事情。但基于Linux的机器上的所有其他浏览器，如Mac、iOS和Android，都遇到了这个问题

我唯一的解决方案是匹配用户代理，并使用.not win命名body标记

然后，我的样式可以覆盖特定于非windows设备的行高。
这是由字体格式历史记录和windows/Mac战争造成的，有不同的方法来计算行高，如果它们不与您使用的字体同步，某些系统会出问题

您需要修复字体（如果许可证允许），或者切换到没有此问题的字体

更好的做法是，不要让您的设计依赖于此处的精确值
因为您在对Jordan Brown的评论中说，使用Arial可以使对齐更加完美，这是字体问题。很可能是创建字体的人没有正确设置上升值

如果您有TTF，请将其上载到，选择“专家”选项，然后保留所有默认选项。我认为解决这个问题的方法是“修复垂直度量”。但是我在更改默认值时遇到了问题，所以我建议保持它们不变

现在，MAC和PC上的字体行高呈现相同（这对我很有用）。
我的解决方案（非常恼人的问题）：


将所有元素设置为浮动：左

设置明确的线高度


享受战胜跨浏览器/平台css荒谬的胜利。
我在为客户品牌创建的自定义字体中遇到了这个问题。我在font Forge中打开了TTF字体。我创建渲染一致性的方法是调整Element->Font-Info->OS/2->Metrics中的值

Win上升/下降值的工作方式似乎与其他值不同。我有以下价值观：

胜利上升：1000

Win下降：0

打字错误上升：750

打字下降：-250

HHead上升：750

h头部下降：-250

我将Win上升和下降值更改为：

胜利攀登：750

胜利下降：250
（注意正值）

看起来您需要匹配这些值，但在我的情况下，我需要将Win Descent的值反转为正值

我对字体的了解非常有限，但这确实解决了我的问题。我将字体生成为TTF，然后通过web字体生成器运行它。这些字体现在在Mac/Windows 7/Android/iOS上呈现相同的效果

希望这对别人有帮助
 我也遇到了这个问题。卢克的回答帮助了我。我必须使用FontForge使用以下设置调整字体：


取消选中所有“是偏移量”复选框以及“真正使用打字标准”复选框。我在Firefox和IE上遇到的问题最多。在这两种浏览器中，我都使用了“Win Descent”的值。对于那些不能使用Font Squirrel的浏览器，我可以确认我使用的字体可以在Font Forge中修复这个问题。根据Luke提供的答案，以下是我遵循的步骤（这里没有新信息，只是提供易于遵循的说明）：

1） 安装FontForge（免费）
下载地址：

2） 在FontForge中打开有问题的字体

3） 选择元素>字体信息

4） 在左侧面板上，单击OS/2，然后单击度量选项卡

5） 将Win Ascent更改为与HHead Asce相同的数字
<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 -->

.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;
    }