如何确保所有 HTML 页面的字体都发生变化？答案

【问题标题】：How do I make sure the font changes across all HTML pages?如何确保所有 HTML 页面的字体都发生变化？
【发布时间】：2021-04-17 09:20:07
【问题描述】：

我有一个由 4 个单独的 HTML 文件组成的网站。我的 CSS 和 Javascript 分别位于名为“styles.css”和“homepage.js”的单独文件中。我在一个名为“nav.html”的单独 html 文件中有一个用于所有 html 页面的导航栏，该文件是使用 w3-include-html 包含的。在导航栏中，我有一个下拉菜单可以更改整个网站的字体。但是一旦字体改变，并且点击了不同页面的链接，字体就会变回默认值。如何确保字体不会更改为默认字体？

nav.html

<nav class="navbar" role="navigation">
    <div class="navbar-header w-100">
        <h3 class="navbar-brand">The Adventures of Sherlock Holmes</h3>
        <div class="navbar-toggle float-right" type="button" data-toggle="collapse" data-target="#nav-content">
            <div class="icon-bar"></div>
            <div class="icon-bar"></div>
            <div class="icon-bar"></div>
        </div>
        <select class="form-select" id="font-dropdown" aria-label="Dropdown for Font Change">
            <option class="font-op" value="Times New Roman" selected>Times New Roman</option>
            <option class="font-op" value="Arial">Arial</option>
            <option class="font-op" value="Comic Sans MS">Comic Sans MS</option>
        </select>
    </div>

    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="blue-carbuncle.html">The Adventure of the Blue Carbuncle</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="engineer-thumb.html">The Adventure of the Engineer’s Thumb</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="beryl-coronet.html">The Adventure of the Beryl Coronet</a>
        </li>
      </ul>
    </div>
</nav>

Javascript

function navFunc() {
    let links = document.querySelectorAll('.nav-link');
    for (let i = 0; i < links.length; i++) {
        if (links[i].innerHTML == document.title) {
            links[i].style.fontStyle = 'italic';
        }
    }
    let options = document.querySelectorAll('.font-op');
    for (let i = 0; i < options.length; i++) {
        options[i].style.setProperty('font-family', options[i].value, 'important');
    }
    document.querySelector('#font-dropdown').onchange = function () {
        document.body.style.fontFamily = this.value;
    };
}

CSS

body {
    font-family: "Times New Roman";
    background: #f7f7f7;
    color: black;
}

.navbar {
    background: black;
    color: white;
    font-size: 1.25rem;
}

.navbar-brand {
    margin: 0;
    font-weight: bold;
}

.navbar-brand, .nav-link, .nav-link:hover {
    color: inherit;
}

.nav-link:hover {
    text-decoration: underline;
}

.icon-bar {
    width: 1.875rem;
    height: 0.1875rem;
    background: white;
    margin: 0.375rem;
}

#font-dropdown {
    padding: 0.1875rem;
    margin: 0.25rem 0.5rem;
    float: right;
}

HTML

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        <script src="https://www.w3schools.com/lib/w3data.js"></script>
        <script src="homepage.js"></script>
        <link href="styles.css" rel="stylesheet">
        <title>Home</title>
    </head>
    <body>
        <div w3-include-html="nav.html"></div>
        <script>w3IncludeHTML(navFunc);</script>

【问题讨论】：

看来您需要存储document.body.style.fontFamily 值，以便它在页面加载时保持不变。一种想法是在 localStorage 中存储一个值，并使用 to 设置 class 或引用字体数据的 JavaScript 数组。
创建您的自定义css类并使用javascript代码调用它
您能详细说明一下吗？我不明白。一个代码示例会很有帮助。

标签： javascript html css bootstrap-4

【解决方案1】：

我会将用户选择的字体设置存储在某处，然后在每次加载页面时再次读取并设置它。

对范围有用的东西可能是Web Storage API。

摘自 MDN 示例：

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

您可以将字体值存储在会话变量中，然后在页面加载时检索它并分配回 .body 类。

【讨论】：