字体不会在输出中改变

Question

我一直在尝试用 HTML / CSS 中的 Google 字体更改我的字体，但它一直保持默认字体。我到处搜索，仍然一样。我的代码有问题吗？

我的html代码：

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
    <script src="myscripts.js">
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="script.js"></script>
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script type="script/script.js">
    </script>
    <title>The Story Maker</title>
  </head>
  <body>
    <h1>The Story Maker</h1>
    <p>Fabricate a comical, romantic, jovial, or even petrifying story with this story maker! Let your imagination and creativity loose!</p>
    <div class="navigation">
      <nav>
        <ul>
          <li>Home</li>
          <li>Create A Story</li>
          <li>About Us</li>
          <li>Donate</li>
        </ul>
      </nav>
    </div>
    <div id="showContainer">

        <div class="imageContainer" id="img_1">
          <img src="https://s3-ap-northeast-1.amazonaws.com/pro-ww-wordpress/libre/uploads/sites/2/2018/03/08091927/Disney-Meet-80cr.jpg">
          <div class="caption">
            The Tale of the Snow White
          </div>
        </div>

        <div class="imageContainer" id="img_2">
          <img src="https://66.media.tumblr.com/51c436b44f5ec312055a7ed22cc6dd2b/tumblr_osyb8fvLA81thrhjso1_400.jpg">
          <div class="caption">
            The Horror Tale of the Dolls
          </div>
        </div>

        <div class="imageContainer" id="img_3">
          <img src="https://66.media.tumblr.com/4dca7a847bd3fe0dae5bcfefddf850fb/tumblr_phrz8lNkHI1qcpptho1_640.jpg">
          <div class="caption">
            The Romantic Tale of Sara and John
          </div>
        <div class="imageContainer" id="img_3">
          <img src="https://i.pinimg.com/originals/1c/f5/a0/1cf5a0e20fdd174956031fff77376f17.jpg">
          <div class="caption">
            The Adventures of Felicity
          </div>
        </div>


    <div class="navButton" id="previous">&#10094;</div>
    <div class="navButton" id="next">&#10095;</div>

  </body>
</html>

我的css代码：

h1 {
  font-family: 'Oswald', sans-serif;
}

我什至尝试使用像 Arial 这样的字体，但没有任何反应。输出没有变化。

Answer 1

你的代码没问题，这一定是你浏览器的问题。这些是支持 Google 字体的浏览器 API:

Google Chrome - 版本 4.249.4+
Mozilla Firefox - 版本：3.5+
Apple Safari - 版本 3.1+
Opera - 版本 10.5+
Microsoft Internet Explorer - 版本 6+

Answer 2

可以在内部尝试一下吗？

<style>
h1 {
  font-family: 'Oswald', sans-serif;
}
</style>

或者检查您是否将 css 文件命名为 styles.css？

字体不会在输出中改变

Fonts won't change in the output

html

css

fonts