字体家族声明不起作用答案

【问题标题】：Font Family Declaration Doesn't Work字体家族声明不起作用
【发布时间】：2016-12-07 23:08:25
【问题描述】：

通过 CSS 课程，我遇到了一个有趣的问题。

在 body 上定义我的 font-family 不会对显示的字体进行任何更改，但它在使用 * 或其他任何地方定义时都有效，（如 p、标题等）。为什么会这样？

这里有代码：

这是 index.html

<!DOCTYPE HTML>
<html lang="en">
    <head>
       <meta charset="utf-8">
        <title>Welcome</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body> ...
    </body>
</html>

这是 style.css

body{
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    line-height: 1.5em;
}

我也在使用 Meyer 的 reset.css

谢谢！

【问题讨论】：

索引是什么意思？
另外，我建议将您的代码和问题减少到必要的最低限度。这样你会得到更多的帮助。没有人愿意筛选大量代码行。
我没有遇到您的问题。更改正文中的字体系列会更改整个文档。 codepen.io/anon/pen/eNKXVB
您使用的是哪个reset.css？看看它是否对font-family 有影响。删除您的reset.css，看看是否能解决您的问题。
奇怪。我削减了代码，尝试了您的 codepen 链接，将 style.css 从那里复制到我自己的编辑器，现在它只是......工作。你是直接从这个页面复制粘贴代码到codepen，还是你改变了什么？

标签： html css font-family

【解决方案1】：

tl;dr：始终在加载您网站的自定义 CSS 资源之前加载重置和外部资源。

说明

您遇到的问题是您的重置 CSS 代码存在特定性问题。

当两个 CSS 规则相互冲突时，浏览器将使用两者中选择器最具体的一个（或者，在相同特异性的情况下，它使用最后加载的规则）。

Mozilla 开发者网络将“Specificity”定义为：

特异性是根据每个选择器类型的计数应用于给定 CSS 声明的权重。在特异性相等的情况下，在 CSS 中找到的最新声明将应用于元素。特异性仅适用于针对相同元素的情况。直接针对元素的 CSS 规则将始终优先于元素从祖先继承的规则。

你说你正在使用Meyer's CSS Reset。该文件包含一行font: inherit，这与您的font-family 规则（以及您的font-size）直接冲突。在这种情况下，您已经陷入了该特殊性定义中的最后一句话：重置的字体属性被应用于段落、标题、列表等，并且“直接针对元素的规则将始终优先于规则元素继承自祖先”（在这种情况下，祖先是 body。

这里有几个选项。首先，仔细检查您是否在重置后加载了 CSS。这可能会解决它，但它可能不会。您可以使您的选择器比重置中的选择器更具体，这应该不难，因为它们被设计为使用可能的最低特异性。这就是为什么使用body * 作为选择器起作用的原因。

第三个选项是不推荐的：在您希望被视为比所有其他规则更高优先级的任何规则上使用 !important 装饰器。这很危险，因为它很容易引起意外的碰撞。

示例

无效示例：这是一个无效示例。此示例不起作用，因为 Stack Snippets 在 HTML 部分之前加载 CSS 部分 - 因为我在 HTML 部分中包含了重置，并且由于两个 CSS 资源具有冲突的相同特异性规则，最近加载的规则被应用。

body {
  font-family: 'Lato', sans-serif;
}

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<p>Hello, world</p>

工作示例：重新排序 CSS 资源：在这里您可以看到，如果我在重置后显式加载我的 CSS，问题就解决了。现在正在使用我的重置规则。

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<style type="text/css">
  body {
    font-family: 'Lato', sans-serif;
  }
</style>

<p>Hello, world</p>

工作示例：使用更具体的选择器：如果您无法更改包含资源的顺序，则此选择器有效。

body * {
  font-family: 'Lato', sans-serif;
}

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<p>Hello, world</p>

工作示例：使用!important 装饰器：就像我之前说的，对于使用!important 装饰器，就像they're generally considered bad practice 一样，请务必仔细考虑。

body {
  font-family: 'Lato', sans-serif !important;
}

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<p>Hello, world</p>

【讨论】：

【解决方案2】：

也许交换网络字体 (google) 和样式 CSS 文件的顺序。我无法复制您的问题（在 JSFiddle 和 Codepen 中尝试过），但您可能会看到依赖问题（在字体名称可用之前引用它）。

另一个可能更好的选择是根本不调用 google 字体 CSS 文件，而是在 style.css 文件的顶部添加一个导入语句，如下所示：

@import url(http://fonts.googleapis.com/css?family=Lato);

希望对您有所帮助。

【讨论】：