70

该设计

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

原始 PSD 设计

编码设计

视窗：Chrome 20 / FF 14 / IE 9

Windows 编码设计

Mac（狮子 / 狮子山）：Chrome / FF

Mac 编码设计

编码

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

视窗

Windows 编码设计对齐

苹果电脑

Mac 编码设计对齐

笔记

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

经过测试

我尝试了以下方法：

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

It seems that no matter what I try, the content will never center align perfectly across mac and 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.

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

Thanks in advance!

4

11 回答 11

37

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.

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.

于 2013-04-07T08:19:32.867 回答
9

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.

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

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

I changed the Win Ascent and Descent values to:

Win Ascent: 750

Win Descent: 250 (notice the positive value)

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.

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.

Hope this helps someone.

于 2016-07-21T15:22:22.520 回答
5

My solution to this (very annoying problem):

  • Set all elements to float:left;

  • Set explicit line-heights;

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

于 2014-04-29T07:30:22.790 回答
5

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):

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

2) Open the problematic font in FontForge

3) Choose Element > Font Info 在此处输入图像描述

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

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.) 在此处输入图像描述

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. 在此处输入图像描述

Thanks to everyone who contributed answers to this question!

于 2019-11-09T19:11:27.777 回答
3

我认为使用这个网站https://transfonter.org/将节省您的时间，而不是下载 FontForg 程序，上传您的字体并切换“修复垂直指标”然后单击转换，它会给您一个可下载的 zip 文件夹，其中包含您选择的所有类型 在此处输入图像描述

于 2020-07-21T19:27:34.200 回答
2

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.

于 2016-09-10T12:05:59.970 回答
1

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?

于 2012-07-30T17:37:05.970 回答
1

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

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

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

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

于 2013-12-11T11:03:17.983 回答
1

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.

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.

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

于 2014-01-10T23:50:58.550 回答
0

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

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

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

于 2013-12-12T17:22:40.587 回答
-1

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.

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

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

于 2012-07-30T17:51:17.013 回答