Подгружать гугл шрифты через 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,
прописать класс в css и после загрузки шрифта установить этот класс нужному элементу.
fontactive : function() {
document.querySelector("body").classList.add("class")
}
|
рони,
так скрипт не прописывает это нигде... если не ошибаюсь. Собственно, идея и заключается в том, чтобы обойти все эти прописывания в стилях и встраивание конструкций типа link rel="stylesheet" и пр. Если я правильно понял его работу, он просто берет всю библиотеку шрифтов и когда я указываю "google: { families: [ 'Ubuntu' ] }," он просто его вытаскивает и присваивает нужному мне контейнеру |
madeas,
не могу подсказать более, без css скрипт не работает, либо сами установите класс элементу через fontactive , либо подгрузите новый стиль через секцию urls точнее тут https://github.com/typekit/webfontloader https://webformyself.com/zagruzka-ve...u-zagruzchika/ |
Вариант - непосредственная смена шрифта для всей страницы (можно и для любого элемента)
<!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,
вы взяли пример знакомых браузеру шрифтов, а если взять гугл шрифт? Допустим Barlow, Playfair Display и Inconsolata. И лучше будет, если сделать не кнопку, а селектор. Так вы предлагаете один из двух возможных, а если их несколько? |
Цитата:
Кнопка или селектор - это дело техники, не принципиально. |
А теперь главный вопрос. Есть ли в этом смысл?)) Или лучше использовать просто импорт или ссылку на гугл, а в css прописывать font-family?
|
Вариант с селектором (селектор можно генерить и динамически - по массиву 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>
|
На мой взгляд, это здорово. Хотя, при написании статей и различных контейнеров, нужно учитывать изменение размера шрифта.
|
| Часовой пояс GMT +3, время: 22:49. |