CSS字体系列字体堆栈优先级

Question

简洁版本

尽管这两个部分的可用字体与font-family: css属性中的第一项具有相同的可用字体，但为什么这里的两个部分呈现不同的外观？

---

超长版本：

据 我所知 ，在CSS中，“ font-family”属性包含一个字体列表，从左到右优先。 如果找到第一个字体，则列表中的其他字体无关紧要：

该属性值是字体系列名称和/或通用系列名称的优先列表。 w3.org

和

font-family属性可以包含多个字体名称作为“后备”系统。 如果浏览器不支持第一种字体，它将尝试下一种字体。 w3schools.com

因此，我有以下一段html，重复了两次，一次在＃font-simple-stack内部，另一次在＃font-full-stack div内部：

<h1 class="serif">
    <abbr title="EtaBits">ηBits</abbr> Syria</span>
    <small> Web Development &amp; Solutions</small>
</h1>

<p class="sans-serif"><strong>EtaBits</strong> is your ultimate online business partner, it helps your business whether it is internet-based or internet-promoted.</p>
<p class="sans-serif"><strong>EtaBits</strong> is a Syria based Web Consultancy, Development &amp; Solutions firm. We aim at providing you with exactly what you need to reach your users and clients.</p>

...以及以下字体CSS定义：

#font-simple-stack .serif {
    font-family: 'Roboto Slab', serif;
}
#font-simple-stack .sans-serif {
    font-family: 'Open Sans', sans-serif;
}

#font-full-stack .serif {
    font-family: 'Roboto Slab', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
#font-full-stack .sans-serif {
    font-family: 'Open Sans', "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

Roboto Slab和Open Sans这两个类别中的第一种字体都是从Google字体api加载的：

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab:600|Open+Sans:400,700" />

我希望所有人都说过，无论是在＃font-full-stack还是＃font-simple-stack中，都有相同的结果，但是实际上， 这两个堆栈呈现的方式不同！

我在Ubuntu 12.04 x64机器上同时在Firefox和Chromium上进行了测试。

Answer 1

您要呼叫的Google字体样式表实际上没有Roboto字体。 参见下文： http : //fonts.googleapis.com/css?family=Roboto+Slab : 600|Open+Sans : 400,700

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

如果您尝试将两个呼叫分开，则可能会起作用。

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Answer 2

字体Roboto Slab 不可用，例如您可以通过查看在浏览器的合适开发人员工具中应用的CSS来查看。 原因是您要的字体重量为600，而没有这样的字体。 根据Google在Roboto Slab上的信息，可用权重为100、300、400、700 。

Answer 3

未调用字体“ Roboto”，因此第一个在Roboto上失败，而是显示默认的衬线。

第二种有大量的后备字体，因此它显示其中一种，因此有效地显示了两种不同的字体。

Answer 4

有两种可能性：

1. 您正在呼叫div之一（ID错误）和/或
2. 这两种Google字体之一无法正确加载

如果它在一个div中起作用而在另一个div中不起作用，则您调用div的方式可能有问题。 换句话说，您可能无法通过正确的ID调用div。 它可以与一个id一起使用，但不能与另一个id一起使用，但是字体堆栈的首选与您向我们展示的编码没有区别。

-要么-

在第一个div中，您将获得serif和sans-serif的系统字体，而在第二个div中，您可能会在字体堆栈中获得一些其他选择。 这是更可能的情况。*

如果看不到通过ID调用div的html代码，也看不到屏幕上的结果字体，那么除了推测之外，什么都很难做。