Динамическая загрузка шрифта в шаблоне Angular - PullRequest
Новая
       45

Динамическая загрузка шрифта в шаблоне Angular

0 голосов
/ 09 июля 2020

Я хотел бы динамически загружать шрифт и использовать его для стилизации шаблона angular. Ниже приведен пример с жестко закодированным URL-адресом шрифта:

Angular html шаблон: 

  <style>    
    @font-face {
      font-family: 'CustomFont';
      font-style: normal;
      src: url('https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMB-hR77LKVTy8.woff2');
      font-weight: 400;
    }
  </style>

  <div style="font-family: CustomFont">Text with custom font </div>

Однако в моем проекте URL-адрес шрифта хранится в базе данных. Я пробовал приведенный ниже пример с переменной «fontUrl» вместо жестко закодированного URL-адреса шрифта, но он не работает. Имя переменной используется вместо значения переменной: 

<style>    
        @font-face {
          font-family: 'CustomFont';
          font-style: normal;
          src: url('{{fontUrl}}');
          font-weight: 400;
        }
</style>

Любые предложения, каким должен быть правильный синтаксис Angular для разрешения значения переменной в моем случае?

РЕШЕНО Я ввел пользовательский тег используя javascript как предложено здесь { ссылка }

...