gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:17:50 25 4
gpt4 key购买 nike

我在我的网站上使用 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:字体中的字形位于 Canvas 上。他们需要周围的空白才能相互定位。白色的量不同。原因之一是 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-heightmargin 来定位。使用相对值。有时会有一点基线偏移:.shift { top: -.01EM;职位:相对; }

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

提示:如果你想稍微改变字体的粗细。你可以让颜色稍微浅一点。例如。从黑色到非常深的灰色。这将使它看起来不那么大胆。

奖励:IE 将遵守。

欢迎反馈。

关于css - 如何标准化不同字体系列的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18445514/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com