CSS | Alan Curtis Blog

Feb 17

Lista di Font sicuri per il web

I font veramente universali, cross-browsers e cross-systems, sono molto pochi.
Mi riferisco a quei font (set di caratteri) che vengono visualizzati allo stesso modo da tutti i computer e sistemi operativi più diffusi al mondo (pc, mac, unix-linux, amiga -se esiste ancora chi la usa per navigare, palmari con symbian o windows mobile, ecc…)

Infatti, affinchè un font sia visualizzato correttamente, non basta definirlo nel codice html o css. Quel font deve anche essere installato nel computer di chi visualizza la pagina web. Infatti se non viene trovato, il sistema lo sostituirà in automatico con uno standard tipo Arial o Times New Roman.

Ecco perchè i font “web safe” sono molto pochi, il loro requisito indispensabile è che siano preinstallati in TUTTI (o quasi) i sistemi operativi esistenti al mondo. Ma alcuni sono protetti da copyright, quindi non utilizzabili da altre società (vedi il Times New Roman di Microsoft).

Ecco quindi le liste di font sicuri per il web con le varianti per la compatibilità su tutti i sistemi, pronte per essere incollate dentro a stili css.

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Visualizza l’anteprima di questo testo:
The Testo di prova, sostituire per vedere l’anteprima in diretta!<br /><br /> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br /><br /> abcdefghijklmnopqrstuvwxyz<br /><br /> 0123456789

Dimensione Font:

RISULTATO:

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Arial, Helvetica, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Arial Black’, Gadget, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Bookman Old Style’, serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Comic Sans MS’, cursive;

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Courier, monospace;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Courier New’, Courier, monospace;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Garamond, serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Georgia, serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Impact, Charcoal, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Lucida Console’, Monaco, monospace;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

0123456789

font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘MS Sans Serif’, Geneva, sans-serif;

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘MS Serif’, ‘New York’, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Symbol, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Tahoma, Geneva, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Times New Roman’, Times, serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: ‘Trebuchet MS’, Helvetica, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

0123456789

font-family: Verdana, Geneva, sans-serif;

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Webdings, sans-serif;

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Sep 15

Come centrare un div con CSS in Mozilla Firefox e Internet Explorer

Si sa, per quel che riguarda i CSS (Cascade Style Sheets o fogli di stile) Internet Explorer è tra i browser peggiori.

Non interpreta correttamente (come da manuale w3c) le proprietà dei css e li legge a modo suo.

Firefox invece è molto più aderente allo standard ufficiale, ma non tutti usano Firefox.

Così, quando bisogna centrare un <div> o un’altro elemento le cose si complicano. Per evitare il classico <center></center> ed avere la compatibilità su tutti i browsers un modo c’è, ma bisogna fare un piccolo trick.

Visto che mi capita di farlo spesso lo scrivo qua come promemoria personale, magari utile anche a qualcun’altro.

Il “trucco” è questo.

Bisogna creare 2 <div> uno dentro l’altro, in questo modo:

<div id="contenitore1"> <div id="contenitore2">Contenuto, testo, foto, ecc...</div> </div>

Poi bisogna creare gli stili nell’header della pagina o in un file .css a parte:

#contenitore1 {
text-align: center; /* per Internet Explorer */
}

#contenitore2 {
margin: 0 auto; /* allineamento standard in CSS */
text-align: left; /* compensiamo l’allineamento al centro */
/* AGGIUNTI SOLO PER VISUALIZZARE MEGLIO L’ESEMPIO: */
border: 2px solid #000;
width: 50%;
}

Ecco fatto, il trucco è tutto qui.

Buon allineamento!

Improve the web with Nofollow Reciprocity.