Как добавить 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>
|
body.style.fontFamily = body.style.fontFamily.replace('sans-serif', '');
|
j0hnik,
то что надо, спасибо |
madeas,
<!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'),
fontFamily = body.style.fontFamily;
serif.onchange = function() {
if (serif.checked) {
body.style.fontFamily += 'sans-serif';
} else {
body.style.fontFamily = fontFamily;
}
}
</script>
<div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
</body>
</html>
|
madeas,
а ещё проще, убрать плюсы из кода
<!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>
|
| Часовой пояс GMT +3, время: 17:55. |