Una volta scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, ecco il codice:
| Codice | Effetto |
|---|---|
|
<font color="blue">testo blu</font> |
![]() |
La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che "face" e "color" sono entrambi attributi del tag <font>):
| Codice | Effetto |
|---|---|
|
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">
|
![]() |
Una volta scelto il colore possiamo sempre decidere di cambiarlo:
| Codice | Effetto |
|---|---|
|
<font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> |
![]() |
La seconda codifica è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. È importante notare che per evitare la ripetizione i due tag sono annidati l'uno dentro l'altro.
Le dimensioni del testo si attribuisco mediante l'attributo 'size' del tag <font>. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>:
Nel caso dei valori interi, ecco la scala di grandezza:
| Codice | Effetto |
|---|---|
|
<font size="1">testo di grandezza 1</font> |
![]() |
Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza del &;lt;font&;gt; utilizzando i segni "+" e "-".
Abbiamo detto che la grandezza del font di base di default nel browser è 3.
Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più
grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l'esempio:
| Codice | Effetto |
|---|---|
|
<font size="+2"> |
![]() |
Come si può vedere le due sintassi sono equivalenti.
La grandezza del font di base può anche essere cambiata:
<basefont size="1" /> <font size="+2"> Testo di 2 grandezze superiore al font di base, sopra definito. </font> <br /> <font size="3"> Testo di grandezza 3. </font> <br /><br /> <basefont size="2" /> <font size="+2"> Testo di 2 grandezze superiore al font di base, sopra ridefinito. </font> <br /> <font size="3"> Testo di grandezza 3. </font>
Come si può vedere nella pagina esemplificativa.
È importante evitare di cadere nell'errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base:
| Codice | Effetto |
|---|---|
|
<font size="7"> |
![]() |
In questo caso, ad esempio, sarebbe sbagliato aspettarsi una dimensione 6 dalla seconda istanza di <font>, perché la dimensione relativa fa sempre riferimento al <basefont>:
Anche se non è corretto farlo, Internet Explorer consente di utilizzare il tag <basefont> per
impostare in una sola volta il tipo di carattere del testo e il suo colore, come si può vedere nell'esempio.
Tuttavia questo tipo di trucco non funziona correttamente né con Mozilla (e quindi neanche con Netscape 6 o superiore, dal momento che eredita il motore di rendering di Mozilla), né con Opera.
Quando state utilizzando il tag <font> - sia che utilizziate il size i valori interi, sia che utilizziate le i valori relativi al tag di base -, in realtà la grandezza del carattere dipende dalle impostazioni del browser dell'utente (come già abbiamo visto per i tag "heading").
Con Internet Explorer ad esempio andando in: Visualizza > Carattere.
Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font.
Questo appunto per le grandezze da 1 a 7 sono grandezze anch'esse relative.
Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall'altra può risultare molto fastidiosa per il webmaster.
L'unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel.
Inserire video nelle pagine Web con HTML5Codec, compatibilità dei browser, tools, codice e best practices per... |
LungoJS: semantica HTML5 per il mobileRealizzare layout per dispositivi mobili tenendo conto della... |
Web storage, i cookies secondo HTML5Come rendere persistenti i dati con HTML5 |
HTML5, section o article? ...E il div?Cerchiamo di fare chiarezza sull'uso di questi due nuovi elementi e... |
HTML5, la validazione del codiceGli strumenti per verificare l'aderenza agli standard di pagine e... |
Guida HTML5Una guida per conoscere e applicare da subito le novità introdotte... |
Guida XHTMLXHTML è il nuovo standard per il WEB ed è la transizione verso... |
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base19 Marzo 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |