覆盖应用于 html 标记的 normalize.css 字体系列答案

【问题标题】：Overriding normalize.css font-family applied to html tag覆盖应用于 html 标记的 normalize.css 字体系列
【发布时间】：2013-10-21 01:46:26
【问题描述】：

我正在尝试使用雅虎的purecss，其中包含normalize.css。我需要能够将 Open Sans 设置为 html 标记的字体系列，但是将 sans-serif 设置为 html 标记上的字体系列的 normalize.css 似乎不允许这样做。我可以应用 Open Sans 的唯一方法是为每个特定的 html 元素设置它，例如 h1。

有谁知道我可以如何覆盖 normalize 并在 html 标签上设置字体系列？我不想为每个标签单独设置它，因为如果我忘记将它应用于某个标签，这可能会导致整个网站出现荒谬的不一致！

谢谢

我应该提到我正在使用 Symfony2 和 Assetic。这是我的代码：

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
 {% block stylesheets %}
     {% stylesheets 
         '@RoundupRoundupBundle/Resources/public/css/pure-skin-roundup.css' 
         '@RoundupRoundupBundle/Resources/public/css/main.css' 
          filter='cssrewrite' 
      %}             
         <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}
 {% endblock %}

然后我自己要覆盖的 css 是（在 main.css 中）：

html {
    font-family: "Open Sans" !important;
}

【问题讨论】：

如果重写css规则在 purecss的规则定义后，应该被覆盖。两个 CSS 选择器是否相同？
是的，它在一个单独的样式表中，在规范化之后被包含在内。我的目标是 html 元素，规范化也是如此。奇怪的是，如果我应用 !important 然后检查一个元素，比如 h1，我可以看到我的字体（Open Sans）覆盖了 normalize 的字体，但它实际上并没有被应用。文字仍然只是无衬线！安排。
你能把你网站的 URL 分享给我，以便我检查样式是如何加载的吗？
恐怕我不能在我的本地机器上开发，但我已经在上面添加了我的代码。

标签： css symfony assetic

【解决方案1】：

好的，想通了。我错过了此页面上documentation 中关于使用带有网格的自定义字体的部分内容。

我还需要定位 purecss 网格类以及 html/body 元素，如下所示：

body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
    /* Set you're content font stack here: */
    font-family: Georgia, Times, "Times New Roman", serif;
}

【讨论】：