Najlepsza praktyka/Styl importowania czcionki do kanciastej aplikacji internetowej 4 cli

Question

Pracowałem nad osobistym projektem Angular 4 i chciałem dodać rodzinę czcionek Ubuntu do mojej aplikacji Angular. Jaka jest najlepsza praktyka lub styl dodawania wielu niestandardowych czcionek do projektu? Obecnie zapisałem rodzinę czcionek ubuntu w /assets/fonts/ubuntu-font-family-0.83 i dodałem ją do najbardziej zewnętrznego składowego pliku CSS, app.component.css z twarzą czcionki.

@font-face { 
    font-family: 'Ubuntu'; 
    src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf'); 
} 

Poprzez umieszczenie tego w oryginalnym komponentu I nie trzeba na nowo zdefiniować czcionkę w zagnieżdżonych składników i po prostu traktują go jak domyślny font-family.

Czy istnieje wyraźniejszy/lepszy sposób na zrobienie tego i nadal wycinany jest duplikat kodu?

Answer 1

Istnieje lepszy sposób dołączania czcionek do strony internetowej, nie tylko do kanciastej aplikacji.

Zamówienie https://fonts.google.com

Dlaczego to jest lepsze?

• wyższa wydajność
• większa szansa, że ​​klient będzie mieć czcionkę w swojej pamięci podręcznej
• nie trzeba się martwić o dołączenie plików i używać Yours przepustowość pochodzenia

w twojej Przypadek, który chcesz zaimportować w pliku css:

@import url('https://fonts.googleapis.com/css?family=Ubuntu'); 

Możesz umieścić go w głównym pliku .css, włączone przez index.html. Możesz też użyć tagu <link> i dołączyć do nagłówków czcionki (również w pliku index.html):

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">