Samouczek CSS

Strona główna CSS Wprowadzenie do CSS Składnia CSS Selektory CSS Instrukcje CSS Komentarze CSS Kolory CSS Tła CSS Granice CSS Marginesy CSS Dopełnienie CSS Wysokość/szerokość CSS Model skrzynki CSS Zarys CSS Tekst CSS Czcionki CSS Ikony CSS Linki CSS Listy CSS Tabele CSS Wyświetlanie CSS Maks. szerokość CSS Pozycja CSS CSS Z-indeks Przepełnienie CSS zmiennoprzecinkowy CSS Wbudowany blok CSS Wyrównanie CSS Kombinatory CSS CSS Pseudo-klasa Pseudoelement CSS Krycie CSS Pasek nawigacyjny CSS Listy rozwijane CSS Galeria obrazów CSS Sprite obrazu CSS Selektory atrybutów CSS Formularze CSS Liczniki CSS Układ strony internetowej CSS Jednostki CSS Specyfika CSS CSS !ważne Funkcje matematyczne CSS

Zaawansowane CSS

Zaokrąglone rogi CSS Obrazy obramowania CSS Tła CSS Kolory CSS Słowa kluczowe w kolorze CSS Gradienty CSS Cienie CSS Efekty tekstowe CSS Czcionki internetowe CSS Przekształcenia CSS 2D Przekształcenia CSS 3D Przejścia CSS Animacje CSS Etykietki CSS Obrazy w stylu CSS Odbicie obrazu CSS Dopasowanie obiektu CSS Pozycja obiektu CSS Maskowanie CSS Przyciski CSS Paginacja CSS Wiele kolumn CSS Interfejs użytkownika CSS Zmienne CSS Rozmiar pola CSS Zapytania o media CSS Przykłady CSS MQ Flexbox CSS

CSS Responsywne

Wprowadzenie do RWD Okienko RWD Widok siatki RWD Zapytania dotyczące mediów RWD Obrazy RWD Filmy RWD Ramy RWD Szablony RWD

Siatka CSS

Wprowadzenie do siatki Pojemnik na siatkę Element siatki

CSS SASS

Samouczek SASS

Przykłady CSS

Szablony CSS Przykłady CSS quiz css Ćwiczenia CSS Certyfikat CSS

Odniesienia CSS

Dokumentacja CSS Selektory CSS Funkcje CSS Dźwięk referencyjny CSS Bezpieczne czcionki internetowe CSS Animowalny CSS Jednostki CSS Konwerter CSS PX-EM Kolory CSS Wartości kolorów CSS Domyślne wartości CSS Obsługa przeglądarki CSS

Bezpieczne czcionki internetowe CSS


Co to są bezpieczne czcionki internetowe?

Bezpieczne czcionki internetowe to czcionki, które są powszechnie instalowane we wszystkich przeglądarkach i urządzeniach.


Czcionki zastępcze

Jednak nie ma w 100% całkowicie bezpiecznych czcionek internetowych. Zawsze istnieje ryzyko, że czcionka nie zostanie znaleziona lub nie zostanie poprawnie zainstalowana.

Dlatego bardzo ważne jest, aby zawsze używać czcionek zastępczych.

Oznacza to, że we font-family właściwości należy dodać listę podobnych „czcionek zapasowych”. Jeśli pierwsza czcionka nie działa, przeglądarka wypróbuje następną, następną i tak dalej. Zawsze kończ listę ogólną nazwą rodziny czcionek.

Przykład

Tutaj są trzy rodzaje czcionek: Tahoma, Verdana i bezszeryfowa. Czcionka druga i trzecia to kopie zapasowe na wypadek, gdyby pierwsza nie została znaleziona.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Najlepsze bezpieczne czcionki internetowe dla HTML i CSS

Poniższa lista to najlepsze bezpieczne czcionki internetowe dla HTML i CSS:

  • Arial (bezszeryfowy)
  • Verdana (bezszeryfowy)
  • Helvetica (bezszeryfowy)
  • Tahoma (bezszeryfowy)
  • Trebuchet MS (bezszeryfowy)
  • Times New Roman (szeryf)
  • Gruzja (szeryf)
  • Garamond (szeryfowy)
  • Kurier Nowy (monoprzestrzeń)
  • Brush Script MT (kursywą)

Uwaga: Zanim opublikujesz swoją witrynę, zawsze sprawdź, jak Twoje czcionki wyglądają w różnych przeglądarkach i urządzeniach, i zawsze używaj czcionek zastępczych!



Arial (bezszeryfowy)

Arial jest najczęściej używaną czcionką zarówno w mediach internetowych, jak i drukowanych. Arial jest również domyślną czcionką w Dokumentach Google.

Arial jest jedną z najbezpieczniejszych czcionek internetowych i jest dostępna we wszystkich głównych systemach operacyjnych.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Verdana (bezszeryfowy)

Verdana to bardzo popularna czcionka. Verdana jest czytelna nawet w przypadku małych czcionek.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (bezszeryfowy)

Czcionka Helvetica jest uwielbiana przez projektantów. Nadaje się do wielu rodzajów działalności.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (bezszeryfowy)

Czcionka Tahoma ma mniej odstępów między znakami.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trebuchet MS (bezszeryfowy)

Trebuchet MS został zaprojektowany przez Microsoft w 1996 roku. Używaj tej czcionki ostrożnie. Nie obsługiwane przez wszystkie mobilne systemy operacyjne.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (szeryf)

Times New Roman to jedna z najbardziej rozpoznawalnych czcionek na świecie. Wygląda profesjonalnie i jest używany w wielu gazetach i serwisach „wiadomościowych”. Jest to również podstawowa czcionka dla urządzeń i aplikacji z systemem Windows.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Gruzja (szeryf)

Georgia to elegancka czcionka szeryfowa. Jest bardzo czytelny przy różnych rozmiarach czcionek, więc jest dobrym kandydatem do projektowania responsywnego na urządzenia mobilne.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (szeryfowy)

Garamond to klasyczna czcionka używana w wielu drukowanych książkach. Ma ponadczasowy wygląd i dobrą czytelność.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Kurier Nowy (monoprzestrzeń)

Courier New to najczęściej używana czcionka szeryfowa o stałej szerokości. Courier New jest często używany z wyświetlaczami do kodowania, a wielu dostawców poczty e-mail używa go jako domyślnej czcionki. Courier New to także standardowa czcionka do scenariuszy filmowych.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (kursywą)

Czcionka Brush Script MT została zaprojektowana tak, aby naśladować pismo odręczne. Jest elegancki i wyrafinowany, ale może być trudny do odczytania. Używaj go ostrożnie.

Przykład

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Wskazówka: sprawdź także wszystkie dostępne czcionki Google i dowiedz się, jak z nich korzystać.