如何标准化不同字体系列的字体大小

Posted 2023-03-06

技术标签:

【中文标题】如何标准化不同字体系列的字体大小【英文标题】：How to standardise font-sizes across different font-family 【发布时间】：2013-08-29 00:35:29 【问题描述】：

我在我的网站上使用 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 标准。

谢谢

【问题讨论】：

我认为这是不可能的，因为如果您已经创建了一种字体，您就会知道每个字符都有一个保留空间，并且您可以在该空间中创建任意大小的字符。 【参考方案1】：

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

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

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

顶部：无调整

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

非常感谢您的反馈。

【讨论】：

【参考方案2】：

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

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

【讨论】：

以上是关于如何标准化不同字体系列的字体大小的主要内容，如果未能解决你的问题，请参考以下文章