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

Question

该设计

信息小部件内容应在中间垂直对齐,如下所示:

---

编码设计

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&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上的元素之外呈现.

视窗

苹果电脑

---

注意

我通过Google Web Fonts样式表嵌入字体.

---

经测试

我尝试过以下方法:

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

似乎无论我尝试什么,内容都永远不会在mac和pc上完美对齐.

---

我的问题

有可能以简单的方式实现我想要做的事情吗？

我应该放弃display:table-cell;路线并在每个元素和孩子身上设置特定的高度/填充吗？我仍然会遇到两个操作系统之间的填充/间距问题.

我应该将此问题归类为什么？LINE-HEIGHT？表细胞？OS？等等...

提前致谢!

Answer 1

如果通过使用不同的字体(Arial)解决它,那么问题在于字体,而不是CSS.您已经注意到浏览器之间的字体呈现不同.

一种可能的解决方案是下载Cutive字体(我看它有一个SIL许可证),然后通过Font Squirrel字体生成器运行它.在"专家"模式下,可以选择"修复垂直度量标准",这可能是您要查找的内容.

Answer 2

我认为使用这个网站https://transfonter.org/将节省您的时间，而不是下载 FontForg 程序，上传您的字体并切换“修复垂直度量”，然后单击转换，它将为您提供一个可下载的 zip 文件夹，其中包含您选择的所有类型

Answer 3

我使用为客户品牌创建的自定义字体来解决此问题.我在Font Forge中打开了TTF字体.我使用渲染创建一致性的方法是调整元素 - >字体信息 - > OS/2->度量标准中的值.

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,然后通过Web字体生成器运行它.现在,字体在Mac/Windows 7/Android/iOS上呈现相同的效果.

希望这有助于某人.

Answer 4

我对此的解决方案（非常烦人的问题）：

• 将所有元素设置为float：left;

• 设置显式的行高；

享受跨浏览器/平台CSS荒谬的胜利。

Answer 5

对于那些不能使用 Font Squirrel 的人，我可以确认这个问题可以在 Font Forge 中为我使用的字体修复。根据 Luke 提供的答案，以下是我遵循的步骤（此处没有新信息，仅提供易于遵循的说明）：

1) 安装 FontForge（免费） 下载地址：https : //fontforge.github.io/

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

3）选择元素>字体信息

4) 在左侧面板上，单击 OS/2，然后单击 Metrics 选项卡

5) 将 Win Ascent 更改为与 HHead Ascent 相同的数字，并将 Win Descent 更改为 HHead Descent 的 POSITIVE 值（即删除减号），然后单击“确定”。（如果这些数字不能解决问题，请尝试调整它们，直到找到可以解决特定字体问题的数字。）

6) 单击文件 > 生成字体。为您的字体选择字体类型。如果字体是 .otf 字体，请选择 OpenType (CFF)。取消选中“保存前验证”。为您的新字体文件设置一个名称。单击生成。

感谢所有为这个问题提供答案的人！