Fonty w CSS

Plansza interaktywna styczeń 2020

URL:
http://www.plotkarka.eu/pi/css3-fonts/
Autor:
Radosław Kowaluk

Właściwości fontu

Nazwa i/lub rodzina fontu
font-family: [ family-name | generic-family ]
 np. 'Times New Roman', Times, serif;
Lorem ipsum dolor
Przykładowe fonty
family-name
Arial; Georgia; 'Arial Black'; Verdana;
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
'Courier New'; Impact; 'Comic Sans MS'; 'Trebuchet MS';
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Rodziny fontów: monotypiczne, bezszeryfowe, szeryfowe, pisanki, ozdobne.
generic-family
Monospace; Sans-serif; Serif; Cursive; Fantasy;
Lorem Lorem Lorem Lorem Lorem
Waga fontu
font-weight:
bolder; lighter; 100; 200;
Lorem Lorem Lorem Lorem
300; normal = 400; 500; 600;
Lorem Lorem Lorem Lorem
bold = 700; 800; 900;
Lorem Lorem Lorem

Właściwości fontu

Rozciągnięcie
font-stretch:
normal; ultra-condensed; extra-condensed; condensed;
Aa Aa Aa Aa
semi-condensed; expanded; extra-expanded; ultra-expanded;
Aa Aa Aa Aa
Styl fontu
font-style:
oblique; italic; normal;
Lorem Lorem Lorem
Rozmiar fontu
font-size:
xx-small; x-small; small; large; x-large;
Aa Aa Aa Aa Aa
xx-large; smaller; medium; larger; np. 12px;
Aa Aa Aa Aa Aa
Proporcje fontu
font-size-adjust:
none;number np. 0.9;
Lorem ipsumLorem ipsum

Właściwości fontu

Skrócone własności fontu
font:
[font-style || font-variant] || [font-weight] || [font-size] || [/line-height] || [font-family] | caption | icon | small-caption | menu | message-box | status-bar
13px Arial;
bold 13px Arial;small-caps 13px Arial;
italic bold 13px/100% Helvetica, Verdana, sans-serif;
Własności fontu
font-synthesis:
none; weight; style;
Lorem ipsum Lorem ipsum Lorem ipsum
Fonty systemowe CSS3
system fonts
caption icon small-caption
Lorem ipsum Lorem ipsum Lorem ipsum
menu message-box status-bar
Lorem ipsum Lorem ipsum Lorem ipsum
Wariant fontu - kapitaliki
font-variant:
normal; small-caps;
Lorem ipsum dolor Lorem ipsum dolor

Własności fontu

Definiowanie fontu

Reguła @font-face*
@font-face {}
font-description
Definicja fontu*
description
font-family: family-name;
font-style: normal; | italic; | oblique;
font-weight: normal; | bold; | 100; | 200; | 300; | 400; | 500; | 600; | 700; | 800; | 900;
font-stretch: normal; | ultra-condensed; | extra-condensed; | condensed; | semi-condensed; | semi-expanded; | expanded; | extra-expanded; | ultra-expanded;
src: [ uri [format(string [, string]*)] | font-face-name ] [, uri [format(string [, string]*)] | font-face-name ]*
unicode-range: urange [, urange]*
Formaty fontów
String Font Format Common extensions
"truetype" TrueType .ttf
"opentype" OpenType .ttf, .otf
"truetype-aat" TrueType with Apple Advanced Typography extensions .ttf
"embedded-opentype" Embedded OpenType .eot
"svg" SVG Font .svg, .svgz

Polski font Cyklop - okres międzywojenny.

Ligatury

Ligatura
font który zawiera dwie (co najmniej) połączone litery w postaci jednego znaku, np. w połączeniu liter fi, gdy kropka z litery i stanowi jednocześnie kulkę na końcu litery f.
Ligatura CSS3
font-variant-ligatures:
normal;none;*
fi ff fl fj ffj fi ff fl fj ffj fi ff fl fj ffj
* common-lig-values || discretionary-lig-values || historical-lig-values || contextual-alt-values ]

Kerning fontu

Kerning
regulowanie odległości pomiędzy konkretnymi parami znaków w danym kroju pisma i jego odmianie. Określane w ten sposób są nie tylko odstępy pomiędzy literami, ale także pozostałymi znakami (np. litera-cyfra, cyfra-cyfra, cyfra-znak interpunkcyjny).
Kerning fontu CSS3
font-kerning:
auto; normal; none;
AV AV AV

Ligatura i kerning

Uwaga: font musi być w standardzie .otf (w przykładach użyto regularnej odmiany fontu Antykwa Półtawskiego)

Cyfry i liczby

Formaty numeryczne CSS3
font-variant-numeric:
normal; 10
numeric-figure-values 10
numeric-spacing-values 10
numeric-fraction-values 10
diagonal-fractions; 1/0
ordinal 10
slashed-zero; 10

Kapitaliki i wersaliki

Własności fontu
font-variant-caps:
normal; Lorem ipsum
small-caps; Lorem ipsum
all-small-caps; Lorem ipsum
petite-caps; Lorem ipsum
all-petite-caps; Lorem ipsum
unicase; Lorem ipsum
titling-caps; Lorem ipsum

Uwaga: font musi być w standardzie .otf (w przykładach użyto regularnej odmiany fontu Antykwa Półtawskiego)

Pozycja fontu CSS3
font-variant-position:
none; sub; super;
position none position sub position super

Własności fontu