Html Mac/PC 上的字体渲染/行高问题（元素外）

Font Rendering / Line-Height Issue on Mac/PC (outside of element)

提问by rebz

The Design

该设计

The info widgets content should be vertically aligned in the middle as such:

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

---

---

The Coded Design

编码设计

Windows: Chrome 20 / FF 14 / IE 9

视窗：Chrome 20 / FF 14 / IE 9

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

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

---

---

The Code

编码

HTML

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

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

---

---

The Issue

问题

Looking at the above images of the coded design you can see how the appears to throw off the alignment. Upon further viewing, the text is being rendered outside of the element on the mac.

查看编码设计的上述图像，您可以看到它是如何摆脱对齐的。进一步查看时，文本正在 mac 上呈现在元素之外。

Windows

视窗

Mac

苹果电脑

---

---

Note

笔记

I am embedding the fonts through a Google Web Fonts stylesheet.

我正在通过 Google Web Fonts 样式表嵌入字体。

---

---

Tested

已测试

I have tried the following:

我尝试了以下方法：

• Set line-heights on every element.
• Set font-weights on every element.
• Set heights on every element.
• A combination of height/padding-top on every element.
• Used percentages/em/px for padding.

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

It seems that no matter what I try, the content will never center align perfectly across mac and pc.

似乎无论我尝试什么，内容永远不会在 mac 和 pc 上完美地居中对齐。

---

---

My Question(s)

我的问题

It is possible to achieve what I'm trying to do in a simplistic manner?

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

Should I forgo the display:table-cell;route and set specific heights/paddings on each element and child? I will still run into padding/spacing issues between the two OS's.

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

What should I categorize this issue under? Line-height? Table-cells? OS? etc...

我应该将这个问题归类为什么？行高？表格单元格？操作系统？等等...

Thanks in advance!

提前致谢！

采纳答案by Henrik

If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers.

如果通过使用不同的字体 (Arial) 解决了问题，那么问题在于字体，而不是 CSS。正如您所注意到的，浏览器之间的字体呈现不同。

One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel font-face generator. In "Expert" mode there is an option to "Fix Vertical Metrics" which might be what you are looking for.

一种可能的解决方案是下载 Cutive 字体（我看到它具有 SIL 许可证），然后通过 Font Squirrel 字体生成器运行它。在“专家”模式下，有一个“修复垂直指标”选项，这可能正是您要找的。

回答by Luke

I came across this problem with a custom font that had been created for a client's brand. I opened the TTF font in Font Forge. The way I created uniformity with rendering was to adjust the values in Element->Font Info->OS/2->Metrics.

我在使用为客户品牌创建的自定义字体时遇到了这个问题。我在 Font Forge 中打开了 TTF 字体。我通过渲染创建一致性的方法是调整 Element->Font Info->OS/2->Metrics 中的值。

Win Ascent/Descent values appear to work differently to the other values. I had the following values:

Win Ascent/Descent 值似乎与其他值不同。我有以下值：

Win Ascent: 1000

Win Ascent: 1000

Win Descent: 0

Win Descent: 0

Typo Ascent: 750

Typo Ascent: 750

Typo Descent: -250

Typo Descent: -250

HHead Ascent: 750

HHead Ascent: 750

HHead Descent: -250

HHead Descent: -250

I changed the Win Ascent and Descent values to:

我将 Win Ascent 和 Descent 值更改为：

Win Ascent: 750

Win Ascent: 750

Win Descent: 250(notice the positive value)

Win Descent: 250（注意正值）

It appears you need to match the values except in my case I needed to invert the value of Win Descent to a positive one.

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

I have very limited knowledge about fonts but this did fix my problem. I generated the font as TTF and then ran it through a web font generator. The fonts now render identically on Mac/Windows 7/Android/iOS.

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

Hope this helps someone.

希望这可以帮助某人。

回答by Martin Christov

My solution to this (very annoying problem):

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

• Set all elements to float:left;

• Set explicit line-heights;

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

• 设置明确的行高；

Enjoy a victory over cross-browser/platform css ridiculousness.

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

回答by benandunt

I also came across this issue. Luke's answer helped me. I had to adjust the fonts with FontForge using this settings:

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

Uncheck all "Is offset" checkboxes and also the "Really use Typo metrics" checkbox. I had most problems with Firefox and IE. Playing around with the value of "Win Descent" fixed it for those two browsers.

取消选中所有“Is offset”复选框以及“Really use Typo metrics”复选框。我在使用 Firefox 和 IE 时遇到了最多的问题。使用“Win Descent”的值修复了这两个浏览器的问题。

回答by colin moock

For those who can't use Font Squirrel, I can confirm that this problem could be fixed in Font Forge for the font I was working with. Based on the answer provided by Luke, here are the steps I followed (no new information here, just providing easy-to-follow instructions):

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

1) Install FontForge (free) Download from: https://fontforge.github.io/

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

2) Open the problematic font in FontForge

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

3) Choose Element > Font Info

3）选择元素>字体信息

4) On the left panel, click OS/2, then click the Metrics tab

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

5) Change Win Ascent to the same number as HHead Ascent, and Win Descent to the POSITIVE value of HHead Descent (i.e., remove minus sign), then click OK. (If those numbers don't address the problem, try adjusting them until you find numbers that fix the issue for your specific font.)

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

6) Click File > Generate Fonts. Choose the font type for your font. If the font is an .otf font, choose OpenType (CFF). Uncheck "Validate Before Saving". Set a name for your new font file. Click Generate.

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

Thanks to everyone who contributed answers to this question!

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

回答by Justin

Since you said in your comment to Jordan Brown that using Arial makes the alignment perfect, this is a font issue. It is likely that whoever created your font did not set the Ascent value properly.

由于您在对 Jordan Brown 的评论中说使用 Arial 可以使对齐完美，因此这是一个字体问题。很可能创建您的字体的人没有正确设置 Ascent 值。

If you have the TTF, upload it to FontSquirrel, select the "Expert" option and then keeping all default options. The one that fixes it I believe is "Fix Vertical Metrics." but I had issues when changing the defaults so I recommend keeping them as-is.

如果您有 TTF，请将其上传到FontSquirrel，选择“专家”选项，然后保留所有默认选项。我认为修复它的方法是“修复垂直指标”。但是我在更改默认值时遇到了问题，所以我建议保持原样。

Now the font line height renders the same on MAC and PC (it worked for me).

现在字体行高在 MAC 和 PC 上呈现相同（它对我有用）。

回答by Will Hancock

I witnessed the same issue, with a custom font (Trade Gothic) served by FastFonts.

我目睹了同样的问题，使用 FastFonts 提供的自定义字体（Trade Gothic）。

Windows did what it should have. But all other browsers on Linux based machines, Mac, iOS, Android suffered the problem.

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

My only solution was to match on the user agent, and namespace the body tag with .not-win

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

Then my styles could override the line-height specific to non-windows devices.

然后我的样式可以覆盖特定于非 Windows 设备的行高。

回答by Jordan Brown

Part of the problem may be in the way Windows/Mac OSX renders fonts. Specifically those that are brought in via @font-face. Have you tried switching out which font formats are being used?

部分问题可能在于 Windows/Mac OSX 呈现字体的方式。特别是那些通过@font-face 引入的。您是否尝试过切换正在使用的字体格式？

回答by nim

It's caused by font format history and Windows/Mac wars, there are different ways to compute line height and if they are not synced in the font you use things will go wrong on some systems

这是由字体格式历史和 Windows/Mac War引起的，有不同的方法来计算行高，如果它们在您使用的字体中没有同步，在某些系统上就会出错

You need to fix your font (if the licensing allows it) or switch to one without this problem

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

See http://www.webfonts.info/node/330(warning, this is an infomercial even if the tech info is true)

请参阅http://www.webfonts.info/node/330（警告，即使技术信息属实，这也是一个电视购物广告）

Better, not to make your design depend on an exact value here

更好，不要让您的设计依赖于这里的确切值

回答by Torsten Walter

The Mac correctly displays the lengths below the baseline as belonging to line height. It seems that OS X counts bottom up whereas Windows calculates from the Top.

Mac 正确显示基线以下的长度属于行高。似乎 OS X 是自下而上计算的，而 Windows 是自上而下计算的。

Since 1em is the width of the capital M of the used font it is usually smaller than the font's overall height.

由于 1em 是所用字体的大写 M 的宽度，它通常小于字体的整体高度。

Have you tried setting the line-height to be the same as the element height? This usually helps solve these kind of problems.

您是否尝试将行高设置为与元素高度相同？这通常有助于解决此类问题。