14.06.2018, 09:23
|
 |
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
Подгружать гугл шрифты через js
Всем привет!
Ковыряясь в канвасе, нашел интересную возможность подгружать любой шрифт с гугла.
Вот сам скрипт:
WebFontConfig = {
google: { families: [ 'Ubuntu' ] },
fontactive: function() {
var block = document.getElementById("mscanvas");
img.onload= function(){
drawText();
}
function drawText() {
ctx.font = "bold 94px Ubuntu";
ctx.textAlign = 'center';
}
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
Поскольку в js я еще новичок, возникает вопрос. Как упростить код и перенастроить скрипт на смену шрифта:
1. для всего body
2. для отдельного контейнера с идентификатором N
И еще вопрос. Если получится, то имеет ли смысл и место быть этой альтернативе? Знаешь название - вписал в скрипт и работаешь.
Последний раз редактировалось madeas, 14.06.2018 в 09:28.
|
|
14.06.2018, 09:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
madeas,
прописать класс в css и после загрузки шрифта установить этот класс нужному элементу.
fontactive : function() {
document.querySelector("body").classList.add("class")
}
|
|
14.06.2018, 09:53
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
рони,
так скрипт не прописывает это нигде... если не ошибаюсь. Собственно, идея и заключается в том, чтобы обойти все эти прописывания в стилях и встраивание конструкций типа link rel="stylesheet" и пр.
Если я правильно понял его работу, он просто берет всю библиотеку шрифтов и когда я указываю "google: { families: [ 'Ubuntu' ] }," он просто его вытаскивает и присваивает нужному мне контейнеру
|
|
14.06.2018, 10:12
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Вариант - непосредственная смена шрифта для всей страницы (можно и для любого элемента)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-family</title>
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
<button id='chfont'>Смена шрифта</button>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript" async=""></script>
<script>
var body = document.querySelector('body');
WebFontConfig = {
google: { families: [ 'Tangerine','Inconsolata' ] },
fontactive: function() {
body.style.fontFamily = 'Tangerine';
}
};
chfont.onclick = function() {
var curFont = body.style.fontFamily;
body.style.fontFamily = (curFont == 'Inconsolata')?'Tangerine':'Inconsolata';
}
</script>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 14.06.2018 в 10:48.
|
|
14.06.2018, 10:16
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
Dilettante_Pro,
вы взяли пример знакомых браузеру шрифтов, а если взять гугл шрифт? Допустим Barlow, Playfair Display и Inconsolata. И лучше будет, если сделать не кнопку, а селектор. Так вы предлагаете один из двух возможных, а если их несколько?
Последний раз редактировалось madeas, 14.06.2018 в 10:19.
|
|
14.06.2018, 10:45
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от madeas
|
|
а если взять гугл шрифт
|
Изменил пример на использование гугл шрифта.
Кнопка или селектор - это дело техники, не принципиально. |
|
14.06.2018, 11:11
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
А теперь главный вопрос. Есть ли в этом смысл?)) Или лучше использовать просто импорт или ссылку на гугл, а в css прописывать font-family?
|
|
14.06.2018, 11:25
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Вариант с селектором (селектор можно генерить и динамически - по массиву fams)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-family</title>
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
<select id='selfont'>
<option disabled>Выберите шрифт</option>
<option selected value='Tangerine'>Tangerine</option>
<option value='Inconsolata'>Inconsolata</option>
<option value='Eater'>Eater</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript" async=""></script>
<script>
var body = document.querySelector('body')
fams = [ 'Tangerine','Inconsolata','Eater' ];
WebFontConfig = {
google: { families: fams },
fontactive: function() {
body.style.fontFamily = 'Tangerine';
}
};
selfont.onchange = function() {
body.style.fontFamily = this.value;
}
</script>
</body>
</html>
|
|
14.06.2018, 11:31
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
На мой взгляд, это здорово. Хотя, при написании статей и различных контейнеров, нужно учитывать изменение размера шрифта.
|
|
|
|
