1

精简版

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

超长版：

据我所知，在 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 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 内部，都会产生相同的结果，但实际上，这两个堆栈的呈现方式不同！

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

4

4 回答 4

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'>
于 2013-10-17T10:29:17.650 回答
1

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

于 2013-10-17T10:31:04.233 回答
0

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

第二个有大量后备字体，因此它显示其中一种字体，非常有效，它显示了两种单独的字体。

于 2013-10-17T10:36:36.930 回答
0

有两种可能：

  1. 您错误地调用了其中一个 div（错误的 id）和/或
  2. 两种谷歌字体之一没有正确加载

如果它在一个 div 中有效，而在另一个 div 中无效，则您调用该 div 的方式可能存在问题。换句话说，您可能没有通过正确的 id 调用 div。它适用于一个 id，但不适用于另一个，但字体堆栈的第一个选择与您向我们展示的编码没有区别。

-或者-

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

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

于 2016-07-21T01:05:07.760 回答