（外界因素的）的Mac / PC上的字体渲染/ LINE-HEIGHT问题(Font Renderi

该设计

该信息小窗口的内容应该在中间这样垂直对齐：

---

编码的设计

视窗：铬20 / FF 14 / IE 9

MAC（狮子/狮子山）：铬/ 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&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;
    } 

---

问题

纵观编码设计，你可以看到出现怎样甩开对准上面的图像。 当进一步观察，文本正在呈现在Mac的元件的外部。

视窗

苹果电脑

---

注意

我通过嵌入谷歌的Web字体样式表的字体。

---

经测试

我曾尝试以下：

• 每一个元素上设置行高度。
• 每一个元素上设置字体权重。
• 每一个元素上设置的高度。
• 高度/填充顶部的每一个元件上的组合。
• 二手百分比/ EM / PX进行填充。

看来，无论什么我尝试，内容永远不会完全居中跨Mac和PC一致。

---

我的问题（S）

这是可能实现我想要一个简单的方式呢？

我应该放弃display:table-cell; 航线和各元素和孩子在设置特定的高度/补白？ 我仍然会碰到两个操作系统的之间的填充/间距问题。

我应该归类在这个问题？ LINE-HEIGHT？ 表细胞？ OS？ 等等...

提前致谢！

Answer 1:

如果是通过使用不同的字体（宋体），然后解决问题与字体，不与CSS。 正如您已经注意到字体渲染的浏览器之间是不同的。

一个可能的解决办法是下载Cutive字体（我看到它有一个SIL许可证），然后通过字体松鼠字体面发生器运行它。 在“专家”模式中，没有“修复垂直度量”，这可能是你所期待的一个选项。

Answer 2:

我碰到这个问题就与已为客户的品牌创造了一个自定义的字体。 我打开在字体伪造TTF字体。 我创建均匀性与再现的方式是调整在元素 - >字体信息 - 的值> OS / 2->度量。

运上升/下降值出现不同的工作与其它的值。 我有以下值：

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

我改变了运上升和下降值：

Win Ascent: 750

Win Descent: 250 （注意正值）

看来你需要除了在我来说，我需要赢得下降的值反转为正的一个匹配的值。

我已经非常有限的知识，关于字体但这并解决我的问题。 我生成的字体为TTF，然后运行它通过网页字体生成。 该字体现在在Mac / Windows 7中/安卓/ iOS版相同的渲染。

希望这可以帮助别人。

Answer 3:

我解决这个（非常恼人的问题）：

• 设置浮动的所有元素：左;

• 集显行的高度;

您可以欣赏到跨浏览器/平台的CSS荒谬的胜利。

Answer 4:

我也遇到了这个问题。 卢克的回答帮助了我。 我不得不使用FontForge此设置来调整字体：

全部取消选中“偏移”复选框，也是“真的用错字指标”复选框。 我有问题最多Firefox和IE浏览器。 与“赢血统”的价值玩耍固定它为这两个浏览器。

Answer 5:

问题的部分原因可能是在Windows / Mac OSX上呈现字体的方式。 特别是那些是通过@字体面带来英寸 您是否尝试切换出其字体格式正在使用？

Answer 6:

我亲眼目睹了同样的问题，与FastFonts提供自定义字体（贸易哥特式）。

窗户做了什么，它应该有。 但在基于Linux的计算机上的所有其他浏览器的Mac，iOS设备，Android的遭遇的问题。

我唯一的解决办法是，以匹配用户代理，并命名空间中的身体标记。不与共赢

然后我的风格可以覆盖的line-height具体到非Windows设备。

Answer 7:

既然你在约旦布朗您的评论说，使用宋体会使对齐完美，这是字体的问题。 这很可能是谁创造了你的字体没有设置的Ascent值正常。

如果你有TTF，把它上传到FontSquirrel ，选择“专家”选项，然后保持所有默认选项。 修复它的一个，我相信是“修复垂直度量。” 但我改变了默认值时，所以我建议让他们为-是有问题的。

现在，字体行高度呈现在Mac和PC一样的（它的工作对我来说）。

Answer 8:

它是由字体格式的历史和Windows / Mac的战争引起的，也有不同的方法来计算行高，如果他们不能在你使用的东西就会出问题在某些系统上的字体同步

你需要修复您的字体（如果许可允许的话）或切换到一个没有这个问题

见http://www.webfonts.info/node/330 （警告，这是即使高科技的信息是真实的电视购物）

好，不要让你的设计依赖于一个确切的价值在这里

Answer 9:

在Mac正确显示低于基线长度为属于线高度。 看来，OS X计数自下而上的，而Windows在顶部计算。

由于1EM是使用字体的大写M的宽度，它通常比字体的整体高度。

你有没有尝试设置行高是相同元素的高度？ 这通常有助于解决这些类型的问题。

文章来源: Font Rendering / Line-Height Issue on Mac/PC (outside of element)