Показать сообщение отдельно
  #1 (permalink)  
Старый 14.09.2018, 15:17
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Как добавить sans-serif к font-family?
Привет, уважаемые. Подскажите, как настроить скрипт.

Составил скрипт, который подгружает шрифты с гугл фотн. Все шрифты прописываются в отдельной опции. При выборе опции в
селекте, для body добавляется font-family и меняется шрифт страницы. Аналогично сделал селекты для толщины и стиля, а
вот на счет засечек не могу сообразить.
Решил сделать через чекбокс, он работает, добавляет к font-family еще и sans-serif, а вот как убрать засечки по второму
щелчку хз) Подскажите, как настроить? Или может можно вернуть предыдущее значение при повторном клике? Например, если я в опцию внесу обычный шрифт типа "Circe-Bold, sans-serif"

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div class='serif-select'>
      <label for='serif'>Sans-Serif <input type='checkbox' id='serif'></label>
    </div>

    <script>
      let
        body = document.body,
        serif = document.getElementById('serif');

      serif.onchange = function() {
        if (serif.checked) {
          body.style.fontFamily += 'sans-serif';
        } else {
          body.style.fontFamily += '';
        }
      }

    </script>

    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
      Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
      годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
  </body>

</html>
Ответить с цитированием