zoukankan      html  css  js  c++  java
  • js 动态修改页面文本字体

    <!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;
          }
          html[data-theme="font2"] {
            --font: "Big Shoulders Stencil Display";
          }
          html[data-theme="font3"] {
            --font: "Pacifico";
          }
    
          * {
            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>
    
  • 相关阅读:
    5G名词术语
    什么是IPv6
    如何用SecureCRT 登录eNSP模拟器里的设备
    numpy-排序
    numpy-tile 数组复制
    经纬度计算距离与方位角
    numpy-添加操作大全
    高效编程之 concurrent.future
    linux命令 集合
    PostgreSQL-表空间
  • 原文地址:https://www.cnblogs.com/ajanuw/p/13943627.html
Copyright © 2011-2022 走看看