Как установить семейство шрифтов, но сохранить запасной стек? - PullRequest
Новая
       4

Как установить семейство шрифтов, но сохранить запасной стек?

2 голосов
/ 01 марта 2020

Можно ли легко установить пользовательский локальный шрифт, используя JavaScript, но сохранить какой-либо стек по умолчанию font-family на случай, если пользователь попытается установить несуществующий шрифт?

Например, если стек font-family: Courier, monospace;, как добавить в начало стека, не прибегая к манипулированию строками?

1 Ответ

1 голос
/ 01 марта 2020

Метод 1: CSS пользовательские свойства

В исходном ответе ниже (метод 2) были некоторые проблемы, но затем я нашел более простое решение с использованием CSS пользовательских свойств (переменных ) . 

p {
    font-family: var(--userfont), Courier, monospace;
}

document.documentElement.style.setProperty('--userfont', 'Arial');
// Result is equivalent to font-family: Arial, Courier, monospace;

document.documentElement.style.setProperty('--userfont', 'non existant');
// Result is equivalent to font-family: 'non existant', Courier, monospace;
// which falls back to Courier assuming 'non existant' isn't actually the name of
// an installed font

JSFiddle demo

Поддержка

Проверьте здесь

В отличие от метода 2 ниже, этот метод поддерживается Edge v15 +. Также он позволяет избежать ошибки в более старых версиях Chromium, от которой страдает метод 2.

Метод 2: FontFace

Вы можете использовать @ font-face или скорее JavaScript API FontFace . 

p {
  font-family: userfont, Courier, monospace;
}

function setUserFont(fontName) {
    const userFontFace = new FontFace('userfont', `local(${fontName})`);
    document.fonts.add(userFontFace);
}

setUserFont('Arial');

Демонстрация JSFiddle

Поддержка

Проверьте здесь

Old / non-Chromium Edge (до v18) не поддерживает JavaScript API.

Похоже есть ошибка в Chromium 73, в результате чего такие шрифты, как «Segoe UI Light», не будут найдены, будет найдена только базовая «Segoe UI». Это относится и к @font-face. Похоже, что исправлено с Chrome 80.

...