Jak CSS zmienia krój, rozmiar, grubość i odstępy liter?
Rodzina czcionki i stos czcionek zapasowych
Rozmiar, grubość i pochylenie liter
Wyrównanie, dekoracja i odstępy w tekście
Ćwiczenie: czcionka w Waszym pliku style.css
Rozgrzewka · 3 minuty
Trzy pytania z poprzedniej lekcji
Jakie trzy sposoby zapisania tego samego koloru poznaliśmy na poprzedniej lekcji?
Co oznacza kanał alfa równy 0, a co równy 1?
Czym różni się właściwość color od background-color?
Część 1 · rodzina czcionki
Trzy rodziny czcionek
Właściwość font-family pozwala wskazać czcionkę (albo listę czcionek) dla wybranych elementów. Czcionki dzielą się na trzy podstawowe rodziny.
MDN: „font-family property... allows you to specify a font (or list of fonts) for the browser to apply to the selected elements” · serif: „fonts that have serifs” · sans-serif: „fonts that don't have serifs” · monospace: „fonts where every character has the same width, typically used in code listings” · developer.mozilla.org/docs/Learn_web_development/Core/Text_styling/Fundamentals
Część 2 · stos czcionek zapasowych
Gdy pierwsza czcionka nie jest dostępna
Nie da się zagwarantować, że każdy komputer ma zainstalowaną wybraną czcionkę. Dlatego podaje się stos czcionek zapasowych - listę, z której przeglądarka wybiera pierwszą dostępną.
p {
font-family: "Trebuchet MS", "Verdana", sans-serif;
}
Ciekawostka z Wikipedii: Verdana, jedna z czcionek z przykładu wyżej, powstała w 1996 roku pod ekrany o niskiej rozdzielczości - stąd szerokie litery i duże odstępy, żeby tekst był czytelny nawet w małym rozmiarze.
MDN: „Since you can't guarantee the availability of the fonts you want to use on your webpages... you can supply a font stack so that the browser has multiple fonts it can choose from” · developer.mozilla.org/docs/Learn_web_development/Core/Text_styling/Fundamentals · ciekawostka: en.wikipedia.org/wiki/Verdana
Część 3 · rozmiar, grubość, pochylenie
Rozmiar, grubość i kursywa
font-size ustawia wysokość liter. font-weight ustawia ich grubość - od 100 do 900, w praktyce najczęściej normal i bold. font-style: italic włącza kursywę.
MDN: „font-weight: Sets how bold the text is... realistically you'll rarely use any of them except for normal and bold” · „100 – 900: Numeric boldness values that provide finer grained control” · „font-style: Used to turn italic text on or off” · developer.mozilla.org/docs/Learn_web_development/Core/Text_styling/Fundamentals
Część 4 · wyrównanie i dekoracja
Jak ułożyć i ozdobić tekst?
text-align ustawia wyrównanie tekstu w poziomie. text-decoration dodaje albo zdejmuje podkreślenie - przydaje się to do zdejmowania domyślnego podkreślenia z linków.
MDN: „text-align property is used to control how text is aligned within its containing content box” · „justify: Makes the text spread out, varying the gaps in between the words” · „text-decoration: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them)” · developer.mozilla.org/docs/Learn_web_development/Core/Text_styling/Fundamentals
Część 5 · odstępy między liniami
Odstępy w tekście: line-height
line-height ustawia wysokość każdej linii tekstu. Wartość bez jednostki (np. 1.6) mnoży rozmiar czcionki - to zalecany sposób zapisu. Zalecany zakres to 1,5-2.
Podobnie działa letter-spacing - odstęp między literami, przydatny do poprawy czytelności gęstej czcionki.
MDN: „line-height property sets the height of each line of text... a unitless value... is generally considered the best option... The recommended line height is around 1.5 – 2” · developer.mozilla.org/docs/Learn_web_development/Core/Text_styling/Fundamentals
CSS · egzamin
Tak pytają na egzaminie
1. Styl p { font-family: serif; background-color: Teal; color: White; font-style: italic; } zastosowano do czterech paragrafów z tekstem „To jest tekst formatowany za pomocą CSS”. Na rysunku: Paragraf 1 - krój bezszeryfowy, pogrubiony, biały na turkusowym tle. Paragraf 2 - krój szeryfowy, kursywa, turkusowy tekst na białym tle z turkusową ramką. Paragraf 3 - krój bezszeryfowy, pogrubiony, biały na turkusowym tle. Paragraf 4 - krój szeryfowy, kursywa, biały tekst na turkusowym tle. Wskaż paragraf sformatowany przedstawionym stylem CSS.
Paragraf 1.
Paragraf 2.
Paragraf 3.
Paragraf 4.
2. Podana definicja stylu CSS h1 { text-align: center; text-transform: uppercase; letter-spacing: 10px; } sprawi, że nagłówki pierwszego stopnia będą
wyjustowane, pisane wielkimi literami, a odstępy między liniami będą ustawione na 10 px
wyjustowane, pisane małymi literami, a odstępy między literami będą ustawione na 10 px
wyśrodkowane, pisane małymi literami, a odstępy między liniami będą ustawione na 10 px
wyśrodkowane, pisane wielkimi literami, a odstępy między literami będą ustawione na 10 px
W style.css ustaw font-family dla body - jedna czcionka bezszeryfowa plus sans-serif jako zapasowa.
Dla nagłówków ustaw font-size, font-weight: bold i text-align: center.
Dla akapitów ustaw line-height: 1.6, żeby tekst był wygodniejszy do czytania.
Dla linków w menu ustaw text-decoration: none - zdejmiesz domyślne podkreślenie.
Zapisz plik, wciśnij F5 i sprawdź stronę w przeglądarce.
Ma się pojawić: nowa czcionka na całej stronie, wyśrodkowane pogrubione nagłówki, akapity z większym odstępem między liniami, linki w menu bez podkreślenia.
Pytania kontrolne
Trzy pytania na koniec
Po co podaje się stos czcionek zapasowych, a nie jedną czcionkę?
Jaka wartość line-height jest zalecana i dlaczego zapisuje się ją bez jednostki?
Której właściwości użyjesz, żeby zdjąć domyślne podkreślenie z linku?
To domyka kolor i tekst: na następnej lekcji model pudełkowy.
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Jedna czcionka w font-family
Strony deklarują długie stosy systemowych czcionek (np. -apple-system, Segoe UI, Roboto, sans-serif), żeby nie pobierać pliku fontu i przyspieszyć wczytanie.
rozbudowane
font-weight: tylko normal/bold
Fonty zmienne (variable fonts) pozwalają ustawić dowolną wartość 100-900, nie tylko dwie skrajne.
rozbudowane
Domyślne podkreślenie linków
Prawie zawsze zdejmowane (text-decoration: none) i zastępowane własnym stylem podświetlenia przy :hover.
zastępowane
line-height ustawiane „na oko”
Bezjednostkowa wartość (np. 1,5) to zalecana praktyka - jednostka (np. px) źle dziedziczy się na elementy potomne o innym rozmiarze czcionki.