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 Fonts 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？

字体在输出中不会改变

2 个答案: