Fonty w CSS

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

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 ipsum	Lorem ipsum

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

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

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

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