Czcionki

Witam w sekcji czcionek!

Używając google fonts można wybrać sobie dowolną czcionkę z ich kolekcji.

Na przykład taka!

Lub taka fancy!

Można użyć do tego metody link:


                            link rel="preconnect" href="https://fonts.googleapis.com"

                            link rel="preconnect" href="https://fonts.gstatic.com" crossorigin 

                            link href="(link do fonta)" rel="stylesheet"

Taki kawałek kodu dostaniemy ze strony google fonts po wybraniu fonta.
Trzeba go wkleić w sekcje "head" naszego dokumentu.

Lub metody @import:

@import url('(link do fonta)');

Taki kawałek kodu też dostaniemy ze strony google fonts po wybraniu fonta
Trzeba go wkleić na początku elementu "style" lub pliku css.
Lecz jest to lekko gorsza metoda, bo przeglądarka musi najpierw otworzyć plik css
aby pobrać czcionkę, co spowalnia czas ładowania strony.

Właściwości i efekty typograficzne, najedź i wypróbuj w czasie prawdziwym!

font-family: z Arial do Times New Roman;
Zmienia font.
font-size: od 18px do 25px;
Zmienia rozmiar czcionki
font-weight: z normal do bolder;
Zmienia pogrubienie czcionki
font-style: z normal do italic;
Pochylenie czcionki.
font-variant: z normal do small-caps ;
Zmienia wariant czcionki (dużo tego, to tylko mały przykład)

text-transform: uppercase ;
Zmienia tekst, tu dla przykładu, zmienia na uppercase.
text-shadow: 1px 1px 2px gray ;
Dodaje cień, x-offset y-offset wielkość kolor.
text-decoration: wavy underline red ;
Dekoracyjne linie pod i nad tekstem, dostępne solid wavy i dotted.
letter-spacing: 2px ;
Szerokość miejsca między literami.
word-spacing: 7px ;
Szerokość znaku spacji (Czyli też szerokość między słowami).

W przykładach powyżej używałem dużo jednostki px, ale czym ona jest? I czy są inne?

TAK! Oto wytłumaczenie najpopularniejszych:

px - (Pixel), najprostsza i najpopularniejsza jednostka, lecz nie jest to dosłownie pixel,
a CSS Pixel, który skaluje się zależnie od rozdzielczości i gęstości ekranu.
em - rozmiar zależy od elementu nadrzędnego
np. jeśli mamy paragraf w w jakimś div, a div ma "font-size: 20px;" to tylko w tym paragrafie 1em = 20px
em nie musi być jedynką, np. w wypadku jak powyżej, 0.5em = 10px
rem - podobne do em, ale tym razem nawiązuje do elementu root, czyli zazwyczaj "html"
np. jeśli element html ma "font-size: 40px" to 1rem = 40px
rem nie musi być jedynką, np. w wypadku jak powyżej, 0.5rem = 20px
% - jest to procent elementu nadrzędnego
np. jeśli chcemy ustawić szerokość sekcji, a sekcja powyżej ma 200px, to 50% = 100px
vw i vh - (viewport width/height)
vh to wysokość okna podzielona na 100, vw to to samo ale z szerokością
(inaczej 1% wysokości lub szerokości okna)
np. rozmiar okna to 700px na 600px, to vw = 7px a vh = 6px
clamp() - o ile nie jest to jednostka, tę funkcję można użyć ustawiając font-size
składnia to clamp(najmniejsza wartość,preferowana wartość,największa wartość)
np. clamp(1vw, 2vw, 3vw)
taki font size:
nie będzie mniejszy niż 1% szerokości ekranu
nie będzie większy niż 3% szerokości ekranu
będzie próbował być 2% szerokości ekranu

Czcionki i fonty

Do menu

Właściwości i efekty typograficzne, najedź i wypróbuj w czasie prawdziwym!

W przykładach powyżej używałem dużo jednostki px, ale czym ona jest? I czy są inne?

TAK! Oto wytłumaczenie najpopularniejszych: