Как связать шрифт в Angular Project, чтобы он не загружался из inte rnet? - PullRequest
Новая
       4

Как связать шрифт в Angular Project, чтобы он не загружался из inte rnet?

0 голосов
/ 05 мая 2020

Я использую шрифт под названием «Font Awesome», и у меня возникла проблема, когда я должен сделать шрифт доступным локально и не должен загружать шрифт из inte rnet, так что даже если клиент использует продукт будет отключен сразу после установки, тогда клиент сможет увидеть текст шрифтом Font Awesome.

as we can see the font is downloaded using CDN

PS Я использую Angular 9 для FrontEnd

Ответы [ 2 ]

1 голос
/ 05 мая 2020

В вашем случае fontawesome предоставляет компонент angular. NPM

1 голос
/ 05 мая 2020

Вы можете

  1. загрузить его из npm / bower
  2. Поместите его где-нибудь в папку со шрифтами (я лично не предпочитаю активы, потому что angular возиться с ним),
  3. Импортировать из .s css

styles.s css: 

@font-face {
font-family: 'FontAwesome';
src: url('<dist folder path>/font-awesome/fonts/fontawesome-webfont.eot');
src: url('<dist folder path>/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),     
    url('<dist folder path>/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), 
    url('<dist folder path>/bower_components/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), 
    url('<dist folder path>/bower_components/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;

}

Обратите внимание, что <dist folder path> относится к месту, откуда вы загружаете свои ресурсы. Это относится к первому облачному img в вашем img чуть выше папки CoreAMS

Скорее всего <dist folder path> = fonts/, если эта папка находится под baseUrl в вашем tsconfig. json

...