Font HTML: come usare caratteri sicuri per il web
Con i font HTML puoi dare un tocco personalizzato ai contenuti di testo delle tue pagine web. Per assicurare che la tua pagina sia a misura di utente devi necessariamente utilizzare caratteri sicuri per il web.
Quali font HTML sono disponibili?
In teoria esiste un numero enorme di caratteri HTML. Di per sé l’HTML non mette a disposizione un carattere, pertanto per le tue pagine web puoi teoricamente usare qualsiasi font caricandolo e configurandolo correttamente. Possono però emergere diversi problemi. In particolare, spesso i caratteri fitti o ornati non vengono visualizzati come desiderato. In questi casi ne risente non solo il design, ma anche la leggibilità. Anche quando un carattere HTML non è installato sul computer dell’utente possono insorgere problemi.
- Disponibilità garantita al 99,99%
- Dominio, SSL ed e-mail inclusi
- Assistenza 24/7 in lingua italiana
I font HTML sicuri per il web
Se sei alla ricerca di font idonei per il tuo sito internet, ti consigliamo di scegliere quelli che sono sicuri per il web. Sono già preinstallati sulla maggior parte dei sistemi oppure sono disponibili come font per il web su server pubblici. Utilizzando questi caratteri eviterai problemi di visualizzazione e il tuo sito web sarà rappresentato in modo uniforme nei diversi browser e sistemi operativi.
Caratteri sicuri per il web
I caratteri sicuri per il web sono quelli preinstallati nella maggior parte dei dispositivi e dei sistemi operativi. Tra i font sicuri per il web più noti troviamo:
- Arial
- Courier New
- Helvetica
- Times New Roman
- Georgia
- Verdana
Questi caratteri sono ampiamente diffusi e offrono un’elevata compatibilità.
Font per il web
Oltre ai caratteri preinstallati puoi anche usare i font per il web, che vengono caricati da server pubblici e offrono un’ampia scelta di stili tipografici. Un fornitore famoso di font per il web è Google. Utilizzando i font per il web puoi personalizzare il design del tuo sito internet senza compromettere la compatibilità. Di seguito trovi un esempio di come puoi integrare un font per il web:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Questo è un testo con il font per il web Roboto.</p>
</body>
</html>Nel nostro articolo “Responsive web design e caratteri: consigli sui font per il web” trattiamo più approfonditamente il funzionamento e i vantaggi dei font per il web.
Quali tag esistono per usare i font HTML?
Due sono i tag HTML che puoi utilizzare per inserire i font nelle tue pagine web: <font> e <basefont>. Dall’introduzione di HTML5 entrambi i tag sono considerati superati, motivo per cui si consiglia di gestire i caratteri HTML con CSS.
<font>
Il tag <font> è usato per selezionare e definire i font HTML. Utilizzando diversi attributi HTML puoi definire il colore, le dimensioni e il tipo di carattere. Di seguito gli attributi e i relativi valori consentiti:
| Attributo | Valori | Descrizione |
|---|---|---|
color
|
Nome del colore, codice di colore esadecimale o valori RGB | Determina il colore del testo |
size
|
Valore numerico da 1 a 7 | Determina le dimensioni del font HTML |
face
|
Nomi dei caratteri HTML | Inserisce la famiglia di font HTML desiderata |
La sintassi di <font> si presenta come segue:
<font size=" " color=" " face=" "> ....</font>L’esempio di codice seguente mostra l’impiego del tag:
<!DOCTYPE html>
<html>
<head>
<title>Tag font in HTML</title>
</head>
<body>
<font size="3" color="0000FF" face="arial, sans-serif">
Questo è un testo di esempio.
</font>
</body>
</html><basefont>
Il tag <basefront> funziona in modo analogo. Definisce la famiglia di font HTML e le sue specifiche, ma sempre per l’intero documento HTML. I suoi attributi corrispondono a quelli del tag <font>. La sintassi è la seguente:
<basefont size=" " color=" " face=" "> ....</font>L’esempio che segue illustra la marcatura del font con il tag <basefont>:
<!DOCTYPE html>
<html>
<head>
<title>Tag font in HTML</title>
</head>
<body>
<basefont size="3" color="0000FF" face="arial, sans-serif">
Questo è un testo di esempio.
</font>
</body>
</html>Definire la dimensione e il colore del carattere e la famiglia di font HTML
Da quando è stato introdotto HTML5, i due tag indicati sopra non sono più utilizzati. Puoi comunque definire i font HTML per il tuo sito web come preferisci. Per impostare le dimensioni del carattere, procedi come indicato nell’esempio di codice seguente:
<!DOCTYPE html>
<html>
<head>
<title>Dimensione del carattere</title>
</head>
<body>
<font size = "1">La dimensione del carattere è = "1"</font><br />
<font size = "2">La dimensione del carattere è = "2"</font><br />
<font size = "3">La dimensione del carattere è = "3"</font><br />
<font size = "4">La dimensione del carattere è = "4"</font><br />
<font size = "5">La dimensione del carattere è = "5"</font><br />
<font size = "6">La dimensione del carattere è = "6"</font><br />
<font size = "7">La dimensione del carattere è = "7"</font>
</body>
</html>Per definire il colore:
<!DOCTYPE html>
<html>
<head>
<title>Colore del carattere</title>
</head>
<body>
<font color = "#008080">Questo testo è petrolio.</font><br />
<font color = "#8B0000">Questo testo è rosso scuro.</font>
</body>
</html>Qui scegliamo la famiglia di font HTML adatta:
<!DOCTYPE html>
<html>
<head>
<title>Family font HTML</title>
</head>
<body>
<font face = "Lucida Console" size = "5">Lucida Console</font><br />
</body>
</html>Se un visitatore o una visitatrice del tuo sito web non ha installato la famiglia di font HTML necessaria, il testo sarà visualizzato in un carattere standard.
- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa