logo标签列表

如何在不同字体系列中标准化字号？

cssfontsfont-facefont-size
3

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

我通过font-face加载它们(Oswald通过Google Web Fonts，但是这是同样的过程)。

然而，当使用相同的字体大小定义（例如font-size:14px）时，这些字体本身的高度会有显着不同的差异。

我需要它们以相同的大小呈现以使页面正常工作。

两个问题：i）是什么原因造成了这种差异，ii）可以用什么方法修复它？最好兼容IE8。

谢谢

我认为这是不可能的，因为如果你已经创建了一个字体，你知道每个字符都有一个保留空间，你可以在该空间内以任何大小创建字符。 - Hashem Qolami
2个回答
1
答案1：字体中的字形位于画布上。它们需要周围的空白来彼此定位。白色的数量不同。其中一个原因是x高度与升降部分（bdfhklt）和下行部分（gjqpy）大小之间的比率。如果字体的x高度相对较小（大的升降部分/下行部分），则比具有相对较大x高度的字体周围的字形更多。影响白色数量的变量还有大写字母/小写字母比例和字体重量。
答案2：没有损坏。您可以使用CSS设置相对字体大小并校正文本的大小。

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将遵守。
欢迎反馈。
0

字符的大小（相对于字体大小）取决于字体设计师的决策。这基本上只是在选择字体组合时需要考虑的事情。通常情况下，字体不会很好地混合在一起，除非它们是专门设计用于混合的。

font-size-adjust 属性旨在解决这个问题。但它仅被 Firefox 支持，并且以有缺陷的方式支持。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接