Fonty w CSS

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css3-fonts.html
Autor:
Radosław Kowaluk

Typografia

Czynności wstępne

Utwórz plik css3-fonts.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Fonty w CSS</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Nazwa fontu1, czcionka2

W elemencie style dodaj kod.

body {
font-family: Georgia;
}

W elemencie body dodaj tekst.

Domyślna czcionka strony.

Zapisz zmiany i odśwież podgląd.

Fonty alternatywne, nazwa rodziny czcionek3

W elemencie style dodaj kod.

h1 {
font-family: Arial, Helvetica, sans-serif;
}

W elemencie body dodaj kod.

<h1>Czcionka elementu h1.</h1>

Zapisz zmiany i odśwież podgląd.

Rozmiar fontu4

W elemencie style dodaj kod.

h2 {
font-size: 34px;
}

W elemencie body dodaj kod.

<h2>Czcionka elementu h2.</h2>

Zapisz zmiany i odśwież podgląd.

Właściwości fontu5

W elemencie style dodaj kod.

h3 {
font: 12px 'Courier New', Courier, monospace;
}

W elemencie body dodaj kod.

<h3>Czcionka elementu h3.</h3>

Zapisz zmiany i odśwież podgląd.

Sprawdzanie poprawność CSS strony

W przeglądarce internetowej wpisz adres jigsaw.w3.org/css-validator

Wybierz zakładkę poprzez załadowanie pliku

Za pomocą przycisku Przeglądaj... otwórz plik css3-fonts.html

Naciśnij przycisk Sprawdź

  1. Reguła {font-family:} - definiuje fonty i/lub rodzinę. Wartośći odzielami przecinkami np. 'Times New Roman', Times, serif;.
  2. Nazwa fontu może przyjmować wartość (windows): Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Nazwy fontów oddzielamy przecinkami, nazwy wielowyrazowe piszemy w apostrofie. Domyślnie przyjmowana jest wartość: 'Times New Roman'.
  3. Nazwa rodziny fontów może przyjmować wartość: serif (czcionka szeryfowa), sans-serif (czcionka bezszeryfowa), monospace (czcionka o stałej szerokości znaków – monotypiczna), cursive (czcionka pochyła, pismo ręczne), fantasy (czcionka fantazyjna, dekoracyjna). Domyślnie przyjmowana jest wartość: serif.
  4. Styl {font-size:} – definiuje wielkość czcionki. Wartość może być równa: medium (standardowa), długość wyrażona w [px|mm|cm|in|pt|pc|em|ex], procent, xx-small, x-small, small, smaller (małe rozmiary), xx-large, x-large, large, larger (duże rozmiary)
  5. Reguła {font:} – definiuje właściwości czcionki: styl, wariant, wagę, wielkość (interlinię), fonty, rodzinę oraz nazwy fontów systemowych. Należy minimalnie określić rozmiar i nazwę fontu.

Sztuka typografii

Waga fontu1

W elemencie style dodaj kod.

p {
font-weight: bold;
}

W elemencie body dodaj kod.

<p>Pogrubienie tekstu</p>

Zapisz zmiany i odśwież podgląd.

Styl fontu2

W elemencie style dodaj kod.

h4 {
font-style: italic;
}

W elemencie body dodaj kod.

<h4>Kursywa tekstu</h4>

Zapisz zmiany i odśwież podgląd.

Wariant fontu3

W elemencie style dodaj kod.

h5 {
font-variant: small-caps;
}

W elemencie body dodaj kod.

<h5>Kapitaliki</h5>

Zapisz zmiany i odśwież podgląd.

Interlinia4

W elemencie style dodaj kod.

h6 {
font: 34px/1.5 Arial;
}

W elemencie body dodaj kod.

<h6>Lorem<br/> ipsum</h6>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css3-fonts.html na serwerze po sprawdzeniu poprawności kodu.

Zadanie

Zastosuj poznane wiadomości w pliku index.html.

Uwagi

W standardzie CSS 2 były zatwierdzone reguły definiujące proporcje5, rozciągnięcie6 fontu i regułę specjalną umożliwiającą definiowanie własnej czcionki7 w następujący sposób:

@font-face {
font-family: nazwa fontu;
src: url(plik czcionki)
}

Plik czcionki musi być w formacie obsługiwanym przez przeglądarki internetowe (np. TrueType). Usunięto je z rekomendacji CSS 2.1 ale maja być w module CSS3.


Używanie nazwy fontów systemowych8 jest przestarzałe.

  1. Reguła {font-weight:} - definiuje pogrubienie czcionki. Wartość może być równa: lighter, normal, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900.
  2. Reguła {font-style:} - definiuje pochylenie lub kursywę fontu. Wartość może być równa: normal (normalna), oblique (pochylona), italic (kursywa).
  3. Reguła {font-variant:} - definiuje kapitaliki. Wartość może być równa: normal (normalna), small-caps (kapitaliki).
  4. Reguła {line-height:} – definiuje interlinię w regule {font:} w postaci {font-size:}/{line-height:}.
  5. Reguła {font-size-adjust:} - definiuje proporcje fontu.
  6. Reguła {font-stretch:} - definiuje rozciągnięcie fontu.
  7. Reguła @font-face - umożliwia zdefiniowanie własnego fontu (pliku czcionki) i jego własności. Umieszczamy ją na początku arkusza stylów.
  8. Nazwy fontów systemowych: caption, icon, small-caption, menu, message-box, status-bar.