设计

Question

设计

信息窗口小部件内容应在中间垂直对齐：

Original PSD Design

编码设计

Windows：Chrome 20 / FF 14 / IE 9

Windows Coded Design

Mac（Lion / Mt. Lion）：Chrome / FF

Mac Coded Design

代码

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 Coded Design Alignment

的Mac

Mac Coded Design Alignment

注意

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

测试

我尝试了以下内容：

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

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

我的问题

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

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

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

提前致谢！

Answer 1

如果使用不同的字体（Arial）解决它，那么问题在于字体，而不是CSS。您已经注意到浏览器之间的字体呈现方式不同。

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

Answer 2

我使用为客户品牌创建的自定义字体来解决此问题。我在Font Forge中打开了TTF字体。我使用渲染创建一致性的方法是调整Element-＆gt; Font Info-＆gt; OS / 2-＆gt; Metrics中的值。

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 3

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

将所有元素设置为float：left;
设置明确的行高;

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

Answer 4

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

FontForge Settings

取消选中所有＆＃34;偏移＆＃34;复选框以及＆＃34;真正使用错字指标＆＃34;复选框。我在Firefox和IE上遇到了大多数问题。玩弄#Des; Win Descent＆＃34;为这两个浏览器修复了它。

Answer 5

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

Answer 6

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

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

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

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

Answer 7

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

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

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

Answer 8

这是由字体格式历史记录和Windows / Mac战争引起的，有不同的方法来计算行高，如果它们没有在字体中同步，那么在某些系统上会出现问题

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

请参阅http://www.webfonts.info/node/330（警告，即使技术信息属实，这也是商业广告）

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

Answer 9

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

1）安装FontForge（免费）从以下下载： https://fontforge.github.io/

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

3）选择“元素”>“字体信息”

4）在左侧面板上，单击OS / 2，然后单击“指标”标签

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

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

感谢所有对此问题做出贡献的人！

Answer 10

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

Answer 11

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

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

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

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

设计