我正在尝试在我的网站上选择 3 种或 4 种字体样式

Question

I want to make a select box to change the font and I wanna choose between 3 or 4 font style

ex. when I click on font 1 it must change to 'Franklin Gothic Medium' for all website that is the point.

    <script>
function changeFont() {
  document.getElementById("body").style.fontFamily = 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
    <script>

    <div class="option-box">
    <h4>Font Style</h4>
    <div class="fonts">
     <select name="" id="myfont">
       <option>font 1</option>
       <option>font 2</option>
       <option>font 3</option>
    </select>
     </div>
     </div>

Answer 1

只需逐步学习或花钱请人去做。

这里是一个开始，学习聆听select变化。

<html>
  <body>
    <select id="myfont">

      <option value='robotFont'>font 1</option>
      <option value='secondFont'>font 2</option>
      <option value='uglyFont'>font 3</option>
    </select>


  <script>
    const fontSelector = document.getElementById('myfont');
    fontSelector.addEventListener('change', () => {
      console.log("fontSelector change", fontSelector.value);
    });
  </script>
  </body>
</html>

下一步可能是

有一些 css class 来指定字体，比如 .robotFont , ...
修改 eventListener 以切换 bodyclass 上的字体

Answer 2

基本 CSS 唯一解决方案（JS是注入CSS而不需要滚动其中一个框）

document.querySelector( 'style' ).innerHTML += `
  html {
    color: #222;
    font-family: Arial;
    text-transform: capitalize;
  }
  html, body, h2, p, ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  body {
    padding: 1rem;
  }    
  h2 {
    margin-bottom: 0.5rem;
  }
  main .button {
    cursor: pointer;
  }
  .button {
    position: relative;
  }
  .dropdown {
    display: none;
    position: absolute;
    top: 2.75rem;
    left: -0.1rem;
    right: -0.1rem;
    background-color: #fff;
  }
  #toggle:checked ~ main .dropdown { display: block; }
`;

main .button, span, span::after, .dropdown, li {
  display: inline-block;
  padding: 0.25rem;
  border-style: solid;
  border-color: #666;
  user-select: none;
}
.button:hover, .button:hover .span_wrapper span::after,li:hover {
  background-color: #eee;
}
.button:active, .button:active .span_wrapper span::after, li:active {
  background-color: #ccc;
}
main p {
  padding: 0.25rem 1rem;
}
.span_wrapper {
  transform: scale( 0.75 ) translateY( -0.125rem ); border-style: none;
}
.span_wrapper span, .span_wrapper span::after {
  transform: rotate( 45deg ); width: 1rem; height: 1rem;
  padding: 0; border-style: none;
  background-color: #222; content: "";
}
.span_wrapper span::after {
  transform: translateY( -0.125rem ) translateX( -0.125rem );
  background-color: #fff;
}
#arial:checked ~ main { font-family: Arial; }
#verdana:checked ~ main { font-family: Verdana; }
#georgia:checked ~ main { font-family: Georgia; }
input { display: none; }
html body { padding-top: 0 }

<style>
  li {
    display: block; padding: 0.5rem; border-style: none;
  }
</style>
<header>
</header>
<input type="checkbox" id="toggle">
<input type="radio" id="arial" name="font">
<input type="radio" id="verdana" name="font">
<input type="radio" id="georgia" name="font">
<main>
  <h2>font style</h2>
  <label for="toggle">
    <div class="button">
      <p>
        arial
        <span class="span_wrapper">
          <span></span>
        </span>
      </p>
      <div class="dropdown">
        <ul>
          <li><label for="arial">Arial</label></li>
          <li><label for="verdana">Verdana</label></li>
          <li><label for="georgia">Georgia</label></li>          
        </ul>
      </div>      
    </div>
  </label>
  <br><br>
  <p>lorem ipsum</p>
</main>

我正在尝试在我的网站上选择 3 种或 4 种字体样式

I'm trying to choose between 3 or 4 font style on my website

html

javascript

css

iphone

fonts