如何仅对特定段落类使用 Google Webfont 加载器？

Question

我一直在使用Google Webfont loader 来用漂亮的字体显示我网站的某些部分。我的这部分工作正常，我所有的<p> 都以我想要的字体显示。但是，我只希望 <p> 的某些类（即<p class="someclass">）与 webfonts 一起显示，然后其余的使用常规字体（即不是 Google Webfonts）。 我实现这一目标的最佳方法是什么？目前，我正在使用这个

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'McLaren' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-loading p.someclass {
        font-family: serif
      }
      .wf-inactive p.someclass {
        font-family: cursive
      }
      .wf-active p.someclass {
        font-family: 'McLaren', cursive
      }
    </style>

以及整个页面中的所有<p> 都使用“McLaren”字体显示。我确定我用 CSS 选择器做了一些愚蠢的事情，但我不太确定是什么。

任何帮助将不胜感激。谢谢

Answer 1

首先，您不一定需要 js 版本的 Google 字体，我刚刚通过 css 链接了它们，并且没有加载问题。其次，有人需要查看您的实际 html 正文，但您不需要 p 前缀，只需将字体添加到您的类 .someclass{font-family:cursizve;} 就像我说的那样，使用 css 伪类在客户端上工作得更好，更轻松