Динамически загружать фронт из сети в Angular: это возможно?

Question

Мне нужно иметь возможность загружать шрифты с внутреннего сервера для стилизации текста в Angular. Я храню в переменной веб-URL моего шрифта (например, website.com/myfont.ttf) и имя (в данном случае myfont).

У меня также есть компонент с, который должен быть стилизован с помощью этого пользовательского шрифта. Обратите внимание, что мои шрифты исходят из серверной части, она должна быть совершенно динамичной. Потратив часы на поиски решения и тестирование всего, что я нашел (FontFace, WebFontLoader, add-font, ...), я начинаю думать, что это невозможно: (.

Подводя итог: мое приложение Angular получает список шрифтов из API моего внутреннего интерфейса в виде JSON. Он получает URL-адрес шрифтов на сервере и их имя. Я хочу использовать шрифт, выбранный пользователем, и динамически применять его к некоторым элементам (label, div и т. Д.).

Спасибо!

Answer 1

Я никогда не делал этого раньше, но я бы предположил, что решение состоит в том, чтобы динамически добавлять и удалять стили на вашей странице head.

let fontName = ...; // Your font name
let fontUrl = ...; // The fully qualified url of your font

let style = document.createElement('style');
style.innerText = "@font-face { font-family: '" + fontName + "'; src: url('" + fontUrl + "'); }";
document.head.appendChild(style);

И затем изменять стиль вашего элемента, добавляяfont-family с fontName, который вы загружаете.

Примечание: объект document доступен только в том случае, если вы уверены, что ваше угловое приложение запущено в браузере, и вы импортируетеCommonModule из @angular/common в импорте для вашего углового приложения. См. Ссылку здесь .

Отказ от ответственности: прямое изменение DOM может противоречить угловым принципам, будьте осторожны.

Отказ от ответственности2: приведенный выше код может открыть для вас недостатки безопасности (XSS).Лучшая консоль угловой безопасности , чтобы сделать это правильно.

Answer 2

В SCSS вы можете использовать декоратор @font-face для определения шрифта cutom:

@font-face {
  font-family: "Segoe UI";
  src: url('assets/segoeuil.ttf') format("truetype");
}

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

Если вы хотите, чтобы ваш шрифт был субъективным для пользователя, вам необходимо добавить эту информацию в запрос. Для этого вы можете использовать HttpInterceptor (https://angular.io/api/common/http/HttpInterceptor)). Эта функция angular позволяет вам изменять любой запрос, который делает клиент. Обычной практикой является добавление токена аутентификации в каждый запрос, таким образом, ваш backend может определить шрифт, субъективный для пользователя и его данных, и отправить его как ответ на запрос.

Хотя это возможно, я хотел бы предложить вам более простое решение (на мой взгляд) - если у вас есть ограниченный набор шрифтов, вы можете просто создать их как статические ресурсы на клиентском сервере (поместите их в assets), а затем - в клиенте - определите, какой шрифт использовать, основываясь на некоторой информации, полученной от пользователя от пользователя. Например - создайте класс css для каждого шрифта и динамически назначьте этот класс вашему элементу body на основе «выбранного шрифта».