Akapity A Fonty w CSS3

Plansza interaktywna styczeń 2015

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

Właściwości fontu

Styl fontu
font-style:
oblique; italic; normal;
Lorem Lorem Lorem
Waga fontu
font-weight:
100; 200; 300;
Lorem Lorem Lorem
400; ; 500; 600;
Lorem Lorem Lorem
700; 800; 900;
Lorem Lorem Lorem

Wartości: lighter, normal (400), bold (700), bolder

Wariant fontu - kapitaliki
font-variant:
normal; small-caps;
Lorem ipsum dolor Lorem ipsum dolor
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łaściwości fontu

Proporcje fontu
font-size-adjust:
none;number np. 0.9;
Lorem ipsumLorem ipsum
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
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
Pozycja fontu CSS3
font-variant-position:
none; sub; super;
position none position sub position super

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 - Warszawa, okres międzywojenny.