字体系列声明不起作用

Question

在学习 CSS 课程时，我遇到了一个有趣的问题。

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

这里有代码：

这是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

谢谢！

Answer 1

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

另一个可以说更好的选择是根本不调用 google 字体 CSS 文件，而是将导入语句添加到 style.css 文件的顶部，像这样：

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

希望对您有所帮助。

Answer 2

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

说明

您在这里遇到的是您的重置 CSS 代码的特异性问题。

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

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

The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type. In the case of specificity equality, the latest declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted. CSS rules that directly target an element will always take precedence over rules that an element inherits from an ancestor.

您说您正在使用 Meyer's CSS Reset。该文件包含一行 font: inherit，这与您的 font-family 规则（以及您的 font-size）直接冲突。在这种情况下，您已经成为特定性定义中最后一句话的牺牲品：重置字体属性应用于段落、标题、列表等，并且 "rules that directly target an element will always take precedence over rules that an element inherits from an ancestor"（在这种情况下, 祖先是 body.

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

第三个选项是不推荐的：在您希望被视为 higher-priority 而不是所有其他规则的任何规则上使用 !important 装饰器。这很危险，因为它很容易导致意外碰撞。

例子

Non-Working 示例：这是一个不起作用的示例。此示例不起作用，因为 Stack Snippets 在 HTML 部分之前加载了 CSS 部分——因为我在 HTML 部分中包含了重置，而且 CSS 资源有冲突的 same-specifity 规则，应用最多 recently-loaded 规则。

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>

工作示例：Re-Order 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>

字体系列声明不起作用

Font Family Declaration Doesn't Work

html

css

font-family