70-480 – Określanie właściwości tekstu HTML

70-480

Stosowanie stylów do wyglądu tekstu (kolor, pogrubienie, kursywa); stosowanie stylów do czcionki tekstu (format WOFF i funkcja @font-face, rozmiar); stosowanie stylów do wyrównania tekstu, odstępów i wcięć, stosowanie stylów do dzielenia tekstu, stosowanie stylów do cienia tekstu.



Dzisiejszym wpisem rozpoczynam ostatni rozdział materiału przygotowującego do egzaminu 70-480. Będzie to seria sześciu artykułów, które skupiać się będą na wyglądzie tworzonego przez nas HTML. Poznamy możliwości CSS3, elastycznego układu zawartości, animowanego i adaptacyjnego interfejsu użytkownika oraz spojrzymy co nieco na możliwości jQuery.

Jak mówi sam tytuł wpisu – zajmiemy się stylowaniem tekstu, czyli wielkość i kolor czcionki, odstępy, akapity, wyrównanie tekstu oraz rzucanym cieniem. Poniżej znajdzie głównie przykłady z jsfiddle.net. Móc coś przeczytać to jedno, ale od razu zobaczyć i móc eksperymentować to drugie.

CSS i tekst

Kolor czcionki

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wyrównanie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dekoracja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Transformacja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wcięcie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Łącznik tekstu

Łącznik tekstu to nic innego jak kontrolowanie tekstu pod względem łamania wyrazów na końcach linii. Odpowiedzialna jest za to właściwość hyphens.

Z tą funkcjonalnością kompletnie nie radzą sobie przeglądarki ChromeOperahttp://caniuse.com/#feat=css-hyphens

Poniższy przykład należy oglądać na Firefox lub Internet Explorer.

CSS hyphens

Efekt cienia

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-*

Przejdźmy do wyboru czcionki oraz jej ustawień. W CSS3 wyróżniamy trzy rodziny czcionek:

  • Serif (szeryfowe) – posiadające ozdobniki, np. Times New Roman, Georgia – nadające się do druku, ale ciężko czyta je się na ekranie monitora
  • Sans-serif (bezszeryfowe) – nieposiadające ozdobników, np. Arial, Verdana – gorzej wyglądające po wydruku, ale znacznie bardziej przyjemne w czytaniu na ekranie monitora
  • Monospace – jednakowe szerokości liter, np. Courier New, Lucida Console

font-family

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy trzy rodziny czcionek. Warto również zauważyć, że właściwość font-family przyjmuje po przecinku kilka wartości dla rodzaju czcionki. Spowodowane jest to tym, że docelowy użytkownik może nie mieć danej czcionki zainstalowanej na swoim komputerze. Sprawdzenie dostępności następuje od lewej, więc w pierwszej kolejności podajemy czcionkę najbardziej przez nas pożądaną, a na końcu generyczną rodzinę czcionek, którą użytkownik na pewno będzie miał u siebie.

font-style

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/17/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-weight

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/21/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-size

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/22/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Warto w tym miejscu zapoznać się wieloma jednostkami rozmiaru czcionki. W tym celu odsyłam do artykułu: CSS Units na w3schools.com.

@font-face

Dzięki właściwości @font-face jesteśmy w stanie zdefiniować własne czcionki lub używać serwisów takich jak Google Fonts, gdzie mamy dostęp do wielu niestandardowych czcionek, które możemy wykorzystać na naszej stronie. Całość jest niezwykle prosta i sprowadza się do zbudowania reguły, która pozwoli nam na użycie zdefiniowanej przez nas nazwy czcionki.

Wyróżniamy przy tym kilka formatów plików czcionek, a każdy obsługiwany jest przez inne przeglądarki:

  • EOT – IE9
  • TTF – przeglądarki mobilne
  • SVG – starsze wersje przeglądarki Safari
  • WOFF – współczesne przeglądarki
  • WOFF2 (nowszy, lepsza kompresja) – najnowsze wersje przeglądarek

Całość sprowadza się do kawałka kodu:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

.. oraz późniejszego (przykładowego) użycia:

font-family: 'MyWebFont', sans-serif;
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/24/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Polecam ponadto zapoznać się ze świetnym artykułem na ten temat: Using @font-face