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

关于间隔常规与轻型间隔，字体的Pro版本包含带有衬砌和旧式图形的扩展OpenType字符集。 字体的标准版本仅带有衬砌图。 您的Light字体可能不是Pro版本。