Question

短版

为什么two sections here呈现方式不同，尽管它们都具有与font-family: css属性中第一项相同的可用字体？

超长版本：

As far as为I know，在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＆amp; Open Sans，都是从google fonts 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内部，都能得到相同的结果，但实际上，the two stacks renders differently!

我在我的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的字体，并且没有这样的字体可用。通过Roboto Slab上的Google信息，可用权重为100,300,400,700。

Answer 3

字体'Roboto'未被调用，因此第一个字体在Roboto上失败，并显示默认的serif。

第二个字体有很多后备字体，所以它显示其中一个，所以有效地显示了两个单独的字体。

Answer 4

有两种可能性：

您正在调用其中一个div（错误的ID）和/或
其中一个Google字体未正确加载

如果它在一个div中工作而在另一个div中没有，那么你调用div的方式可能有问题。换句话说，你可能没有用正确的id调用div。它适用于一个id，但不适用于另一个id，但是字体堆栈的第一个选择与你向我们展示的编码没有区别。

-OR -

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

如果没有看到您通过ID调用div的html代码而没有在屏幕上看到生成的字体，那么除了猜测之外很难做任何事情。

CSS font-family字体堆栈优先级

短版

超长版本：

4 个答案: