CSS font-family 字体堆栈优先级答案

【问题标题】：CSS font-family fonts stack precedenceCSS font-family 字体堆栈优先级
【发布时间】：2016-07-21 09:05:07
【问题描述】：

短版

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

超长版：

As far as 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 和 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。

【问题讨论】：

当您在第二个示例中列出较少的字体时会发生什么？比如'Roboto Slab', Palatino, Helvetica？可能与此有关，或者其中一个字体名称存在拼写错误。
@AlexLynham 即使有拼写错误，浏览器也应该将其视为不存在的字体。只要找到第一个字体 (Roboto Slab)，它就不应该尝试检查其他字体。尝试删除一两个字体可能会解决问题，但我更感兴趣的是找到问题的根源。
啊，很公平。也有兴趣了解根本原因！

标签： html css fonts cross-browser font-family

【解决方案1】：

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

【讨论】：

【解决方案2】：

您调用的 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'>

【讨论】：

+1 引导我朝着正确的方向前进 :) 我会接受@Jukka 的回答，因为它说明了问题的根源：我检查得不够仔细 ;)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

有两种可能：

您错误地调用了其中一个 div（错误的 id）和/或
两种 Google 字体之一未正确加载

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

-或-

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

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

【讨论】：