3

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

我正在通过font-face（Oswald via Google Web Fonts，但这是相同的过程）加载两者。

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

我需要它们渲染相同大小的页面才能正常工作。

两个问题：i) 是什么导致了这种差异，以及 ii) 可以做些什么来解决它？最好符合 IE8 标准。

谢谢

4

2 回答 2

1

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

答案 2：没有任何问题。您可以使用 css 并相对设置 font-size 并更正文本的大小。

x 高度和大写高度

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

上：无调整

中：相同的 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 将遵守。

反馈表示赞赏。

于 2013-08-26T22:48:19.793 回答
0

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

该font-size-adjust物业旨在解决此问题。但它仅受 Firefox 支持，而且方式不完善。

于 2013-08-26T16:45:14.873 回答