Czcionki
Wprowadzenie
Skoro już wiesz jak modyfikować teksty w CSS, to przyszła pora na modyfikację fontów, czyli kroju czcionek. W tej lekcji zapoznasz się między innymi z podziałem czcionek, dowiesz się jak je zmienić, pogrubić oraz powiększyć przy pomocy kodu CSS.
Typy czcionek
Abyśmy w ogóle zaczęli mówić o modyfikowaniu czcionek, musisz poznać ich podstawowy podział. Do dyspozycji mamy aż pięć rodzajów czcionek:serif,sans-serif,monospace,cursiveifantasy.
Pierwsza z nich, czyliserif(szeryfowa) posiada tak zwane ogonki w znakach. Najbardziej popularną czcionką tego rodzaju to jestTimes New Roman.
Drugim rodzajem czcionek są czcionkisans-serif(bezszeryfowe). One nie posiadają powyżej pokazanych ogonków w literach. Jednymi z bardziej znanych czcionek bezszeryfowych sąArialiHelvetica.
Kolejny typ tomonospace. Czcionkę tego typu charakteryzuje taka sama szerokość każdej litery. W tej grupie popularne sąCourierorazCourier New. Czcionki tego typu są często używane do wyświetlania fragmentów kodu w tekście, dokładnie tak też jest w tym kursie.
Kolejna grupa tocursive. Rodzina tych czcionek ma naśladować pismo odręczne. Zdecydowanie najpopularniejszą tutaj jestComic Sans.
Ostatnią rodziną czcionek jestfantasy. Jest to styl dekoracyjny używany między innymi do tytułów. Dosyć popularną czcionką tego typu jestImpact.
font-family
Pora teraz nauczyć się zmieniać czcionki przy pomocy CSS. Właściwośćfont-familyodpowiada za krój czcionki. Wartość to tak naprawdę wszystkie nazwy czcionek oraz ich rodzin. Wartości w tym przypadku może być kilka. Przeanalizujmy przykład.
| 123 | .myFontClass{font-family:Arial,Helvetica,Verdana,sans-serif;} |
|---|---|
W tym przypadku jako wartość zostały przekazane trzy nazwy czcionek oraz rodzinasans-serif. Tylko pytanie po co aż tyle. Przeglądarka bierze najpierw pierwszą czcionkę (Arial) i sprawdza czy taka czcionka istnieje w systemie, jeśli tak to wyświetla tekst w tej czcionce. Natomiast jeśli jej nie ma to bierze kolejną (Helvetica) i ponownie sprawdza czy system posiada ten krój, i sytuacja cały czas się powtarza. Co jeśli napotka rodzinę czcionek? Wtedy bierze “pierwszą z brzegu” czcionkę i ją wyświetla. Rodziny krojów zawsze dajemy na samym końcu.
Ustalając czcionkę warto stosować się do następujących zasad. Warto zapamiętać że łączymy zawsze czcionki z tej samej rodziny, czyli jeśli dajemy czcionkę Arial z rodziny sans-serif to nie wpisujemy po niej czcionki na przykład z rodziny monospace. Warto też zapamiętać, że na stronie nie stosujemy dużej ilości czcionek. Najczęściej tylko jedną bezszeryfową i jedną szeryfową na całą stronę.
| 123 | .myFontClass{font-family:Arial,Helvetica,Verdana,sans-serif;} |
|---|---|
font-style
Właściwośćfont-styledefiniuje styl czcionki. Przyjmuje ona następujące wartości:
normal- standardowy tekst;italic- pochylony, kursywa;oblique- ukośny.
Każdy ze stylów został pokazany w poniższym przykładzie.
| 1 2 3 4 5 6 7 8 910111213141516171819202122232425 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="font-style: normal;"><span>font-style: normal;</span><br/> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.</div><divstyle="font-style: italic;"><span>font-style: italic;</span><br/> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.</div><divstyle="font-style: oblique;"><span>font-style: oblique;</span><br/> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.</div></body></html> |
|---|---|
font-size
Właściwośćfont-sizesłuży do zmiany wielkości liter. Przyjmuje ona wartości miary wraz z odpowiednimi jednostkami dostępnymi w CSS.
| 1 2 3 4 5 6 7 8 9101112 | <div> Standardowa wielkość.</div><divstyle="font-size: 30px;"> font-size: 30px;</div><divstyle="font-size: 10px;"> font-size: 10px;</div><divstyle="font-size: 150%;"> font-size: 150%;</div> |
|---|---|
font-weight
Właściwośćfont-weightzmienia grubość (ciężar) liter. Dozwolone wartości to:
100;200;300;400lubnormal- wartość domyślna;500;600;700lubbold- czcionka pogrubiona;800;900.
Aby przekonać się w praktyce jak wygląda każda z wielkości, uruchom poniższy przykład.
| 123456789 | <divstyle="font-weight: 100;">font-weight: 100;</div><divstyle="font-weight: 200;">font-weight: 200;</div><divstyle="font-weight: 300;">font-weight: 300;</div><divstyle="font-weight: 400;">font-weight: 400;</div><divstyle="font-weight: 500;">font-weight: 500;</div><divstyle="font-weight: 600;">font-weight: 600;</div><divstyle="font-weight: 700;">font-weight: 700;</div><divstyle="font-weight: 800;">font-weight: 800;</div><divstyle="font-weight: 900;">font-weight: 900;</div> |
|---|---|
Jak widzisz, różnice pomiędzy niektórymi poziomami są całkowicie niewidoczne.
font-variant
Właściwośćfont-variantzmienia wariant czcionki. Tu są tylko dwie wartości:normal- wartość domyślna,small-caps- wyświetla każdą literę jakby była wielka, aczkolwiek różnica w początkowej wielkości liter jest widoczna w postaci rozmiaru danej litery. W języku polskim takie znaki nazywamykapitalikami, w angielskim tosmall caps.
| 1 2 3 4 5 6 7 8 910 | <divstyle="font-variant: normal;"> font-variant: normal;<br/> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.</div><divstyle="font-variant: small-caps;"> font-variant: small-caps;<br/> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.</div> |
|---|---|
Import
Co to by była za zabawa, gdyby tylko korzystało się z czcionek dostępnych w przeglądarce, a wiadomo że nie wszystkie mają pożądane czcionki. Teraz dowiesz się jak zaimportować czcionki do przeglądarki. Są na to dwa sposoby. Jeden korzysta z HTML, drugi z CSS.
Pierwszy jest znacznie prostszy wystarczy w sekcjiheadwpisać:
| 1 | <linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto"> |
|---|---|
Powyższy kod zaimportuje przykładową czcionkęRoboto, która swoją drogą ładnie wygląda. Jest to znaczniklink, który wymaga dwóch atrybutów:relz wartościąstylesheet, a drugihrefz linkiem do strony, w tym przypadkuhttps://fonts.googleapis.com/, która hostuje czcionkę. Gdy dodasz taki fragment kodu do swojego pliku HTML, otrzymujesz dostęp do wybranej czcionki. Teraz wystarczy tylko w właściwościfont-familywpisać nazwę danej czcionki.
| 1 2 3 4 5 6 7 8 9101112131415 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkhref="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet"></head><body><divstyle="font-family: Roboto;"><span>font-family: Roboto;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div></body></html> |
|---|---|
Drugi ze sposobów jest trochę bardziej skomplikowany, ponieważ wymaga od nas użycia tak zwanej reguły CSSfont-face.
| 1234 | @font-face{font-family:Roboto;src:url('Roboto.woff')format('woff');} |
|---|---|
Można powiedzieć, że@font-faceto szczególny selektor. W jego właściwościach ustalamy za pomocą jakiej nazwy (font-family) będziemy korzystać z danego kroju tekstu oraz skąd przeglądarka ma pobrać ten plik. W właściwościsrcjako wartość wykorzystujemy funkcjęurlgdzie podajemy dokładną ścieżkę do pliku. Ważne jest to, że czcionka może być albo udostępniona na własnym serwerze, w takim wypadku podajemy ścieżkę względną (z poziomu folderu w którym jest plik CSS), lub może być pobierana z witryny hostingowej np.https://fonts.googleapis.com/.
W przypadku pobrania czcionki ze stronyhttps://fonts.googleapis.com/użycie tego sposobu wygląda następująco.
| 1234 | @font-face{font-family:Roboto;src:url("https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2"\)format\("woff2"\);} |
|---|---|
W tym przypadku został podany link bezpośrednio do pliku z czcionką. Funkcjaformatnie jest wymagana ale dobrze podawać ponieważ informujemy przeglądarkę o rodzaju pliku z czcionką. Pliki czcionek mogą być zapisane w kilku formatach, jednak na razie nie będziemy się zagłębiać w ten temat.
Zadanie 1
W tym zadaniu Twoim celem jest ustawienie kroju czcionkisans-serif, rozmiaru czcionki na18pxoraz grubości czcionki na700dla elementup.
Podsumowanie
W tej lekcji miałeś okazję poznać bez wątpienia ważny temat, jakim są czcionki w CSS. Na początku omówiliśmy dostępne typy czcionek oraz miałeś okazję zobaczyć przykład z każdej grupy. Następnie zajęliśmy się określeniem rodziny czcionek w plikach CSS, stylem czcionki, jej rozmiarem, wielkością i grubością. Ostatnią część lekcji poświęciliśmy na import czcionek.