Question

我在网站上工作，我想向某人展示不同网页上网站上两种字体的区别。

有没有一种方法可以对其进行编码，以便我可以轻松地在字体之间切换？

我正在考虑使用第二个字体制作第二个样式表，并使用jQuery来禁用/启用样式表。但这意味着我必须将它放在每个页面上。

有更好的方法吗？

Answer 1

你可以使用两个不同字体的类，并使用JS / jQuery

进行切换

Answer 2

是的，您可以使用Js / Jquery轻松完成。您只需使用不同的“font-familys”切换一个类。

如果你想改变一个div中的字体，这里就是一个例子：

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.text {
  height: 100%;
  width: 100%;
  padding: 500px;
  box-sizing: border-box;
  font-family: cursive;
}

.font {
  font-family: monospace !important;
}

button {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  background-color: black;
  border: none;
  color: white;
  margin: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FontChange</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    
    <!-- Hosted jQuery libary -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function () {
      $("button").click(function () {
        $(".text").toggleClass("font");
      })
    });
    </script>

  </head>
  <body>
    <div class="text">
      <button>Click me to change the font-family!</button></br>
    
    
      Lorem ipsum dolor sit amet, consetetur     sadipscing elitr, sed diam nonumy eirmod tempor        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

  </body>
</html>

只需单击即可在字体之间切换

2 个答案: