CSS3 - Własna czcionka (@font-face)

Kaskadowe arkusze stylów umożliwiają dołączanie czcionek, które są pobierane i używane w razie potrzeby. Dzięki temu autorzy witryn mogą wybierać czcionki, które są indywidualnie dopasowane do projektu strony, ale nie są ograniczane przez platformę na której działają. Do dołączania niestandardowej czcionki do projektu służy reguła @font-face.

Zobacz:


Przykład użycia własnej czcionki

W tym akapicie została użyta niestandardowa czcionka dołączona za pomocą reguły font-face.

<p class="czcionka">W tym akapicie została użyta <strong>niestandardowa czcionka</strong> dołączona za pomocą reguły <em>font-face</em>.</p>
@font-face {
   font-family: mojaczcionka;
   src: url(FoglihtenNo07.otf);
}

p.czcionka {
   font-family: mojaczcionka, sans-serif;
}

Reguła @font-face

Właściwość @font-face pozwala na użycie w witrynie czcionki spoza grupy czcionek standardowych, używanych przez przeglądarki.

@font-face {deskryptory}

Parametry właściwości @font-face określane są za pomocą deskryptorów:

Deskryptor Wartość Opis
font-family nazwa Wymagany. Określa nazwę czcionki, wykorzystywaną w deklaracji stylu elementu.
src url(adres) Wymagany. Określa adres url pliku czcionki.
font-stretch normal
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Określa jak czcionka powinna być rozciągana.
Wartość domyślna "normal".
font-style normal
italic
oblique
Określa styl czcionki.
Wartość domyślna "normal".
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Określa wagę czcionki.
Wartość domyślna "normal".
unicode-range zakres Określa zakres znaków Unicode wspieranych przez czcionkę.
Wartość domyślna "U+0-10FFFF".

Przykład:

@font-face {
   font-family: mojaczcionka;
   src: url(FoglihtenNo07.otf);
}

Deskryptor font-family

Deskryptor font-family służy do określania nazwy rodziny czcionki wykorzystywanej w deklaracji stylu elementu. Deskryptor font-family jest wymagany.

font-family: nazwa;

Przykład:

@font-face {
   font-family: mojaczcionka;
   src: url(FoglihtenNo07.otf);
}

Nazwa czcionki określona w deskryptorze font-family, wykorzystywana jest później jak każda inna nazwa rodziny czcionek w deklaracji stylu.


Deskryptor src

Deskryptor src służy do określania lokalizacji w sieci pliku czcionki, która ma zostać pobrana i wykorzystana w witrynie. Deskryptor src jest wymagany.

src: url(adres);

Adres url pliku czcionki może być określony relatywnie względem arkusza stylów, czyli umieszczony na tym samym serwerze, jak również absolutnie, odnosząc się do dowolnego miejsca w sieci, w którym plik czcionki się znajduje.

Atrybut src pozwala na dołączenie do dokumentu czcionek o formatach:

Format czcionki Rozszerzenie
WOFF (Web Open Font Format) .woff
TrueType .ttf
OpenType .otf
Embedded OpenType .eot
SVG Font .svg , .svgz

Powszechnie obsługiwane przez przeglądarki są formaty WOFF, TTF oraz OTF.

Przykład:

@font-face {
   font-family: mojaczcionka;
   src: url(FoglihtenNo07.otf);
}

Właściwości czcionki

Właściwość Opis CSS
@font-face Określa czcionkę do pobrania i wykorzystania, spoza grupy czcionek używanych przez przeglądarkę. 3
font Ustawia właściwości czcionki w jednej deklaracji. 1
font-family Określa rodzinę czcionki. 1
font-size Określa rozmiar czcionki. 1
font-style Określa styl czcionki. 1
font-variant Określa wariant czcionki 1
font-weight Określa wagę (grubość) czcionki. 1

Właściwości:

  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

zostały opisane w artykule CSS - Czcionka.