0

我们已经实现了一个字体工具包，但仍然遇到字体如何呈现数字的问题。出于某种原因，这些数字似乎在其基线上方和下方浮动，使它们看起来“有弹性”。我们实现了 webfont 工具包，下面是 CSS 示例：

@font-face {
    font-family: "interval_semi_bold";
    font-style: normal;
    font-weight: normal;
    src: url("/common/fonts/interval_semi_bold-webfont.eot?#iefix") format("embedded-opentype"), url("/common/fonts/interval_semi_bold-webfont.woff") format("woff"), url("/common/fonts/interval_semi_bold-webfont.ttf") format("truetype"), url("/common/fonts/interval_semi_bold-webfont.svg#IntervalSansProBold") format("svg");
}
@font-face {
    font-family: "interval_regular";
    font-style: normal;
    font-weight: normal;
    src: url("/common/fonts/interval_regular-webfont.eot?#iefix") format("embedded-opentype"), url("/common/fonts/interval_regular-webfont.woff") format("woff"), url("/common/fonts/interval_regular-webfont.ttf") format("truetype"), url("/common/fonts/interval_regular-webfont.svg#IntervalSansProBold") format("svg");
}

问题：在浏览器如何解释@font-face 声明方面，"" 选择器的行为是否与 '' 选择器不同？

4

4 回答 4

2

“弹性”基线实际上是一种特定类型的印刷数字，用于在段落文本中设置数字。它们通常被称为“老式”数字，因为它们模仿小写字母的升序和降序行为，从而减少对沉浸式阅读的干扰。与小写字母一样，它们也具有可变宽度。因此，如果您将数字用于段落设置，这是一种很好的排版做法。

另一方面，不“反弹”的数字称为“衬里”数字。它们有一个固定的、相等的宽度，这使得它们对于设置数字的垂直列很有用。

CSS3 属性font-variant-numeric允许您选择旧样式或衬里图形，只要字体在其字符集中具有这两种变体。

更多信息：http: //dev.w3.org/csswg/css3-fonts/#font-variant-numeric-prop

您使用的是Interval Sans Pro吗？该字体确实包含两种类型的数字。

于 2012-05-09T11:43:59.753 回答
2

单引号或双引号在 CSS 中可以互换并且具有完全相同的含义，并且它们所使用的属性值将在每个浏览器中以完全相同的方式呈现。您使用哪种引号并不重要。故事结局。

如果您的字体正常工作，但只是数字看起来对您不利，则该字体中的数字很可能是故意的。例如，Georgia某些数字的基线非常低：

在此处输入图像描述

我无法找到您要测试的确切字体，但您可能需要选择另一种以您可以接受的方式呈现数字的字体。

于 2012-05-08T18:44:24.437 回答
0

双引号"和单引号'可以在选择器中互换使用。它与浏览器如何解释它无关。

有关 URI 值的更多信息，请访问W3

于 2012-05-08T18:45:53.030 回答
0

关于 Interval Regular 与 Light，Pro 版本的字体包含带有衬里和旧式图形的扩展 OpenType 字符集。标准版字体只有衬里数字；您的 Light 字体可能不是 Pro 版本。

于 2013-01-22T17:29:25.817 回答