Jak używać zewnętrznych czcionek internetowych w CSS
Jeśli chcesz dodać czcionkę na swojej stronie internetowej, która nie jest domyślnie obecna na komputerze użytkownika, możesz użyć reguły CSS @font-face, aby to zrobić. Reguła @font-face określa, że najpierw musisz podać określoną nazwę niestandardowej czcionki, a następnie wskazać plik czcionki. W tym artykule ustalisz zrozumienie, jak korzystać z zewnętrznych czcionek internetowych w CSS. Ten samouczek obejmuje następujące tematy.
- Formaty czcionek
- Jak dodać zewnętrzne czcionki internetowe za pomocą CSS
- Formaty czcionek i wsparcie ich przeglądarki.
Zaczynajmy.
Formaty czcionek
Zanim zagłębimy się w szczegóły dodawania zewnętrznych czcionek internetowych, najpierw musimy ustalić podstawowe zrozumienie różnych formatów czcionek, które szczegółowo wyjaśniliśmy poniżej.
Czcionki TrueType
Czcionki TrueType lub TTF to standardowy format czcionki, który został założony przez Microsoft i Apple w późnych latach 80. Jest bardzo odpowiedni do rozszerzenia wsparcia dla starych przeglądarków, szczególnie na smartfonach.
Czcionki opentype
Czcionki openType lub OTF to format czcionki wymyślony przez Microsoft na tych samych wzorach, co czcionki TrueType. Ten format jest szeroko stosowany w większości systemów komputerowych.
Format czcionki Web Open
Format czcionki WOFF powstał w 2009 roku jako format obejmujący zarówno formaty TTF, jak i OTF. Ten format kompaktuje pliki i jest kompatybilny ze wszystkimi nowoczesnymi przeglądarkami. Ma dwie wersje, druga nazywana jest Woff 2.0 i kompaktowe pliki w lepszy sposób niż starsza wersja.
Wbudowane czcionki opentype
Wbudowane czcionki OpenType, częściej określane jako EOT, jest formatem, który jest kompresją OTF opracowaną przez Microsoft. Ten format jest używany jako czcionki osadzone na stronach internetowych.
Czcionki SVG
Format czcionek SVG umożliwia wyświetlanie SVG w postaci grafiki wektorowej. Oznacza to, że różne postacie będą wyświetlane w różnych kolorach lub animacjach.
Teraz, gdy dowiedzieliśmy się o różnych formatach czcionek, rozważ poniższe kroki, aby zrozumieć całą procedurę dodawania zewnętrznych czcionek do Twojej witryny.
Jak dodać zewnętrzne czcionki internetowe za pomocą CSS
Below we have provided you a step-by-step guide on how you can add external fonts using CSS.
Krok 1: Pobierz niestandardowe czcionki
Pierwszym krokiem byłoby pobranie żądanych czcionek w formacie czcionek TrueType (.TTF) lub format czcionek openentype (.często) z dowolnego repozytorium czcionek. Na przykład tutaj pobieramy czcionki „tańca” z Google Fonts.
Kliknij „Pobierz rodzinę”, aby pobrać niestandardowe czcionki.
Krok 2: Wyodrębnij pliki z folderu zip
Po pobraniu wyodrębnia pliki z folderu zip.
Czcionki są w .Format TTF. Teraz wybierz jedną z tych czcionek, które należą do rodziny czcionek „tańczących”.
Notatka: Upewnij się, że pobrane pliki są obecne w tym samym folderze co plik internetowy.
Plik czcionki jest obecny w dokładnie tym samym folderze co plik internetowy.
Krok 3: Dodaj czcionki do pliku CSS
Do swoich zewnętrznych czcionek w pliku CSS użyj reguły @font-face. Reguła @font-face określa, że po pierwsze, musisz podać określoną nazwę niestandardowej czcionki, a następnie wskazać plik czcionki, podając adres URL atrybutowi SRC.
Przypisaliśmy nazwę „CustomFonts” do rodziny czcionki, a następnie podaliśmy adres URL pliku czcionki do atrybutu SRC. Na koniec przypisujemy rodzinę czcionki do naszego nagłówka i nadajemy jej kolor.
Krok 4: Połącz swój plik CSS do pliku HTML
I na koniec dodaj swój arkusz stylów do pliku HTML.
Zewnętrznie łączymy nasz plik CSS z plik HTML.
Wyjście
Z powodzeniem dodano zewnętrzną niestandardową czcionkę internetową.
Formaty czcionek i wsparcie ich przeglądarki
Poniższa tabela pokazuje wszystkie formaty czcionek i ich odpowiednie wsparcie przeglądarki.
| Format czcionki | Microsoft Edge | Google Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| TTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| OTF | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| Woff | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| Woff2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| EOT | 6.0 | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany |
| Svg | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany | 3.2 | Nieobsługiwany |
Wniosek
Aby używać zewnętrznych czcionek w CSS, pobierz żądane czcionki z dowolnego repozytorium czcionek i dodaj je do pliku CSS za pomocą reguły @font-face, która określa określoną nazwę do niestandardowej czcionki i wskazuje plik czcionki, podając adres URL SRC atrybut. Ten samouczek został zaprojektowany w celu wyjaśnienia na temat korzystania z różnych formatów czcionek i tego, w jaki sposób można użyć zewnętrznych czcionek internetowych w CSS.