Question

我在我的网站上使用Oswald（http://www.google.com/fonts/specimen/Oswald）和Bebas Neue（http://dharmatype.com/dharma-type/bebas-neue.html）。

我通过font-face（Oswald通过Google网络字体加载，但这是相同的过程）。

但是，当使用相同的字体大小定义时，字体本身会出现明显不同的高度（例如font-size:14px呈现两种截然不同的大小）。

我需要它们为页面呈现相同的大小才能正常工作。

两个问题：i）导致这种差异的原因，以及ii）可以采取哪些措施来解决这个问题？最好符合IE8标准。

由于

Answer 1

答案1：字体中的字形位于画布上。他们需要周围的空白才能相互定位。白色量不同。其中一个原因是x高度与上升尺寸（bdfhklt）和下降尺寸（gjqpy）之间的比率。如果字体具有相对较小的x高度（大（as / de）cenders），则字形周围的白色比具有相对大的x高度的字体多。有更多的变量会影响白色的数量。大写/小写比例和字体权重。

答案2：什么都没有打破。您可以使用css并相对设置font-size并更正文本的大小。

x-height and capital height

您可以将图像滚动到浏览器窗口的边缘，以检查字形对齐的位置。

顶部：无调整

中：相同的x高度。这看起来不错！

底部：相同的资本高度。这是你需要的，因为你的一个字体都是大写字母。

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p
        {
            border: 1px solid red;
            line-height: 1EM;
            font-size: 600%;
            margin: 0 0 0.1EM 0;
        }

        .arial { font-family: 'Arial'; }
        .times { font-family: 'Times New Roman'; }

        .times_same_x_height { font-size:116%; }
        .times_same_capital_height { font-size:108%; }        

        .font_stack { font-family: "Does not exist", serif; }

    </style>
</head>
<body>

    <p>
        <span class="arial">xH</span>
        <span class="times">xH</span>
    </p>

    <p>
        <span class="arial">xH</span>
        <span class="times times_same_x_height">xH</span>
    </p>

    <p>
        <span class="arial">xH</span>
        <span class="times times_same_capital_height">xH</span>
    </p>

</body>
</html>

注意0：如果它看起来正确，那就是正确的。所以不要使用x-height并完成它。有时，大小的明显差异会使字体组合更加和谐。用你的眼睛（和大脑）。

注1：我将文字放在同一段落中。我这样做是因为它调整了基线。但是你的文本元素更有可能彼此分离。定义正确的line-height和margin到位置。使用相对值。有时会有一点基线转变：.shift { top: -.01EM; position:relative; }

注意2：如果您的字体不存在。 font_stack将使用下一个最佳字体。意识到你的精美排版适用于堆栈中的所有字体！

提示：如果要稍微更改字体的重量。你可以让颜色更轻一些。例如。从黑色到非常深灰色。这将使它看起来不那么大胆。

奖励：IE将遵守。

感谢您的反馈。

Answer 2

字符大小（相对于字体大小）取决于字体设计者的决定。这基本上只是您在选择字体组合时需要考虑的事项。通常，字体不能很好地混合，除非设计为。

font-size-adjust属性旨在解决此问题。但它仅受到Firefox的支持，并且以一种破碎的方式支持。

如何在不同的font-family中标准化字体大小

2 个答案: