CSS字体选择器用法

Question

我们已经实现了一个字体工具包，但是仍然会遇到字体呈现数字的问题。出于某种原因，这些数字似乎漂浮在其基线之上和之下，使它们具有“弹性”外观。我们实现了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声明，“”选择器的行为是否与''选择器不同？

Answer 1

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

如果您的字体 正在运行，但只是数字向您看，那么该字体中的数字很可能是故意的。例如，Georgia对于某些数字具有非常低的基线：

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

Answer 2

“弹性”基线实际上是一种特定的印刷数字，用于设置段落文本中的数字。它们通常被称为“旧式”数字，因为它们模仿带有上升和下降的小写字母的行为，使它们对沉浸式阅读的破坏性降低。与小写字母一样，它们也具有可变宽度。因此，如果您使用数字作为段落设置，这是一个很好的排版练习。

另一方面，不“反弹”的数字称为“衬里”数字。它们具有固定的相等宽度，可用于设置垂直数字列。

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

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

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

Answer 3

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

有关URI值的更多信息，请转到W3

Answer 4

关于Interval Regular vs. Light，Pro版本的字体包含带有衬里和旧式数字的扩展OpenType字符集。字体的标准版本只有衬里数字;你的Light字体可能不是Pro版本。