Изменение шрифта с помощью JavaScript

Итак, основной рабочий процесс заключается в следующем:

  1. Асинхронная загрузка файла шрифта (это уже сделано).

  2. Получить URL (готово).

  3. Измените шрифт на новый URL.

Я понимаю, что это должно быть сделано через font-face, но я не могу понять, как получить к нему доступ через JavaScript.

Ответы

Ответ 1

Вы можете создать новый элемент <style> с помощью правила @font-face и добавить его в document head:

var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode("\
@font-face {\
    font-family: " + yourFontName + ";\
    src: url('" + yourFontURL + "') format('yourFontFormat');\
}\
"));

document.head.appendChild(newStyle);

Конечно, вам, вероятно, придется предоставить все необходимые форматы и URL-адреса шрифтов, если только вас не беспокоит поддержка современных настольных браузеров (в этом случае вы просто будете использовать WOFF – я предполагаю, что разумный, из-за других особенностей, которые вы упомянули).

Ответ 2

Определите объект FontFace:

new_font = new FontFace('conthrax', 'url(fonts/conthrax-sb.ttf)')

Вызовите метод load, чтобы загрузить шрифт:

new_font.load().then(function(loaded_face) {
    // use font here

}).catch(function(error) {

});

... это возвращает Promise, который после разрешения передает загруженный FontFace.

Добавьте загруженный шрифт в документ:

new_font.load().then(function(loaded_face) {
    // use font here
    document.fonts.add(loaded_face)
}).catch(function(error) {

});

Используйте шрифт по мере необходимости (например, в Azle):

az.style_text('my_title', 1, {
    "font-family" : "conthrax"
})