3.1 Czcionki internetowe
Podłączanie czcionek na stronach internetowych odgrywa kluczową rolę w tworzeniu unikalnego i atrakcyjnego designu. Czcionki internetowe pozwalają używać czcionek, które nie są zainstalowane na komputerze użytkownika, dzięki ich pobieraniu z serwera. Google Fonts to jeden z najpopularniejszych serwisów do korzystania z czcionek internetowych. Przyjrzyjmy się bliżej, jak podłączać czcionki internetowe i Google Fonts na stronach internetowych.
Czcionki internetowe — to czcionki, które są pobierane z zdalnego serwera i wyświetlane na stronie internetowej, nawet jeśli nie są zainstalowane na urządzeniu użytkownika. Zapewnia to większą elastyczność w wyborze czcionek i pozwala na tworzenie bardziej atrakcyjnego designu.
Podłączanie czcionek internetowych
Przykład podłączenia czcionek internetowych za pomocą @font-face:
Najpierw należy załadować pliki czcionek na swój serwer. Zazwyczaj są to pliki w formatach .woff, .woff2, .ttf, .eot i .svg.
Krok 2. Użycie @font-face w CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Zalety użycia @font-face:
- Kontrola: pełna kontrola nad wyborem i użyciem czcionek
- Zgodność: wsparcie dla różnych formatów czcionek, aby zapewnić zgodność z różnymi przeglądarkami
- WOFF (Web Open Font Format): szeroko wspierany format dla czcionek internetowych
- WOFF2: ulepszona wersja WOFF z lepszą kompresją
- TTF (TrueType Font): standardowy format dla czcionek, wspierany przez większość przeglądarek
- EOT (Embedded OpenType): format wspierany przez Internet Explorer
- SVG: format dla użycia czcionek w grafice SVG
3.2 Google Fonts
Google Fonts oferuje kolekcję darmowych czcionek, które można łatwo zintegrować na swojej stronie internetowej. Zaletą użycia Google Fonts jest łatwość podłączenia i różnorodność dostępnych czcionek.
Podłączanie czcionek za pomocą Google Fonts:
1. Wybór czcionki na stronie Google Fonts:
Wejdź na Google Fonts i wybierz czcionkę, którą chcesz użyć.
2. Uzyskanie linku do podłączenia:
Na stronie wybranej czcionki wybierz potrzebne odmiany i style. Następnie Google Fonts wygeneruje link do podłączenia czcionki.
3. Wstawienie linku do dokumentu HTML:
Skopiuj wygenerowany link i wstaw go do sekcji <head> swojego dokumentu HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Zastosowanie czcionki w CSS:
Użyj właściwości font-family, aby zastosować czcionkę do elementów na stronie.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Przykład użycia Google Fonts przez HTML:
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Ten tekst jest wyświetlany przy użyciu czcionki Roboto.</p>
</body>
</html>
3.3 Użycie CSS @import
Czcionki Google można również podłączyć za pomocą reguły @import w CSS.
Przykład użycia Google Fonts przez @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Zalety użycia Google Fonts:
- Łatwość użycia: łatwo zintegrować czcionki za pomocą jednej linii kodu
- Duży wybór: dostęp do wielu czcionek różnych stylów i kategorii
- Optymalizacja wydajności: czcionki są pobierane z wysokowydajnych serwerów Google
Atrybut display="swap" w kodzie do podłączenia czcionek internetowych Google Fonts poprawia wydajność i doświadczenie użytkownika. Kiedy podłączasz czcionki internetowe, przeglądarka musi najpierw załadować i wyświetlić czcionkę, zanim będzie mogła wyświetlić tekst. Może to spowodować opóźnienie, zwłaszcza przy wolnym internecie. display="swap" rozwiązuje ten problem, wskazując przeglądarce, aby używała domyślnej czcionki systemowej, dopóki nie załadowana zostanie czcionka internetowa. Jak tylko czcionka internetowa zostanie załadowana, przeglądarka zastąpi nią systemową.
Wpływ na wydajność:
Przy użyciu czcionek internetowych ważne jest, aby uwzględniać ich wpływ na wydajność strony internetowej. Ładowanie dużej ilości czcionek lub odmian może zwiększyć czas ładowania strony. Aby zminimalizować ten wpływ, stosuj się do poniższych zaleceń:
- Używaj minimalnie potrzebnej ilości odmian: wybieraj tylko te odmiany, które są naprawdę potrzebne
- Używaj atrybutu
display="swap": to zapewnia wyświetlanie tekstu domyślną czcionką systemową, dopóki nie zostanie załadowana czcionka internetowa, co poprawia odbiór wydajności przez użytkownika - Optymalizacja dostarczenia czcionek: używaj cache i wstępnego ładowania (preload) dla poprawienia wydajności
GO TO FULL VERSION