Блог

Главная - Вопросы по программированию - Как я могу убедиться, что шрифт меняется на всех HTML-страницах?

Как я могу убедиться, что шрифт меняется на всех HTML-страницах?

#javascript #html #css #bootstrap-4

Вопрос:

У меня есть веб-сайт, состоящий из 4 отдельных HTML-файлов. Мои CSS и Javascript находятся в отдельных файлах под названием «styles.css» и «homepage.js» соответственно. У меня есть панель навигации для всех моих html-страниц в отдельном html-файле под названием «nav.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>

Комментарии:

1. Похоже, вам нужно будет сохранить document.body.style.fontFamily значение, чтобы оно сохранялось при загрузке страницы. Одна из идей состоит в том, чтобы сохранить значение в localStorage и использовать его для задания класса или ссылки на массив данных шрифтов JavaScript.

2. создайте свой собственный класс css и вызовите его с помощью кода javascript

3. Не могли бы вы поподробнее, пожалуйста? Я не понимаю. Пример кода был бы полезен.

Ответ №1:

Я бы где-нибудь сохранил настройки шрифта, выбранные пользователем, а затем читал и устанавливал их снова при каждой загрузке страницы.

Что-то полезное для области может быть 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);
}

Вы можете сохранить значение шрифта в переменной сеанса, затем извлечь его и назначить обратно .класс тела при загрузке страницы.

Метки: ,