js动态修改字体 Google fonts

weixin_44921956

已于 2022-08-08 17:48:44 修改

阅读量317

点赞数

分类专栏：记录文章标签： javascript html css

于 2022-08-08 17:48:34 首次发布

原文链接：https://www.cnblogs.com/ajanuw/p/13943627.html

版权

记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Google fonts API docs：https://developers.google.com/fonts/docs/css2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Goldman&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
      rel="stylesheet"
    />

    <style>
      html {
        --font: Goldman,sans-serif;
      }
      html[data-theme="font2"] {
        --font: "Big Shoulders Stencil Display",sans-serif;
      }
      html[data-theme="font3"] {
        --font: "Pacifico",sans-serif;
      }

      * {
        font-size: 30pt;
        font-family: var(--font);
      }
    </style>

  </head>
  <body>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
      facilis labore dolor perferendis illo eligendi dolores neque maxime
      obcaecati aut perspiciatis dolorum, eum at atque dolore nobis cum quis
      ducimus!
    </p>

    <button class="font1">Goldman</button>
    <button class="font2">Big Shoulders Stencil Display</button>
    <button class="font3">Pacifico</button>

    <script>
      document.querySelector(".font1").addEventListener("click", (e) => {
        document.documentElement.removeAttribute("data-theme");
      });
      document.querySelector(".font2").addEventListener("click", (e) => {
        document.documentElement.setAttribute("data-theme", "font2");
      });
      document.querySelector(".font3").addEventListener("click", (e) => {
        document.documentElement.setAttribute("data-theme", "font3");
      });
    </script>

  </body>
</html>

注：同一字体可设置不同字重font-weight