Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Font sicuri per il Web CSS


Cosa sono i caratteri Web Safe?

I caratteri Web Safe sono caratteri installati universalmente su tutti i browser e dispositivi.


Caratteri di riserva

Tuttavia, non ci sono font completamente sicuri per il web al 100%. C'è sempre la possibilità che un font non venga trovato o non sia installato correttamente.

Pertanto, è molto importante utilizzare sempre i caratteri di riserva.

Ciò significa che dovresti aggiungere un elenco di "caratteri di backup" simili nella font-family proprietà. Se il primo font non funziona, il browser proverà il successivo, il successivo e così via. Termina sempre l'elenco con un nome di famiglia di caratteri generico.

Esempio

Qui ci sono tre tipi di carattere: Tahoma, Verdana e sans-serif. Il secondo e il terzo font sono backup, nel caso in cui il primo non venga trovato.

p {
font-family: Tahoma, Verdana, sans-serif;
}

I migliori caratteri sicuri per il Web per HTML e CSS

Il seguente elenco sono i migliori caratteri sicuri per il Web per HTML e CSS:

  • Arial (sans-serif)
  • Verdana (sans serif)
  • Helvetica (sans-serif)
  • Tahoma (sans serif)
  • Trabucco MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospazio)
  • Brush Script MT (corsivo)

Nota: prima di pubblicare il tuo sito web, controlla sempre come appaiono i tuoi caratteri su browser e dispositivi diversi e usa sempre i caratteri di riserva!



Arial (sans-serif)

Arial è il font più utilizzato sia per i media online che per quelli cartacei. Arial è anche il carattere predefinito in Google Docs.

Arial è uno dei caratteri Web più sicuri ed è disponibile su tutti i principali sistemi operativi.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Verdana (sans serif)

Verdana è un font molto popolare. Verdana è facilmente leggibile anche per caratteri di piccole dimensioni.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (sans-serif)

Il font Helvetica è amato dai designer. È adatto a molti tipi di attività.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (sans serif)

Il font Tahoma ha meno spazio tra i caratteri.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trabucco MS (sans-serif)

Trebuchet MS è stato progettato da Microsoft nel 1996. Utilizzare questo tipo di carattere con attenzione. Non supportato da tutti i sistemi operativi mobili.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (serif)

Times New Roman è uno dei caratteri più riconoscibili al mondo. Ha un aspetto professionale ed è utilizzato in molti giornali e siti Web di "notizie". È anche il carattere principale per i dispositivi e le applicazioni Windows.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Georgia (serif)

Georgia è un carattere serif elegante. È molto leggibile con caratteri di diverse dimensioni, quindi è un buon candidato per il design mobile-responsive.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (serif)

Garamond è un font classico utilizzato per molti libri stampati. Ha un aspetto senza tempo e una buona leggibilità.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Courier New (monospazio)

Courier New è il font serif monospace più utilizzato. Courier New viene spesso utilizzato con i display di codifica e molti provider di posta elettronica lo utilizzano come carattere predefinito. Courier New è anche il carattere standard per le sceneggiature di film.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (corsivo)

Il font Brush Script MT è stato progettato per imitare la scrittura a mano. È elegante e sofisticato, ma può essere difficile da leggere. Usalo con attenzione.

Esempio

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Suggerimento: controlla anche tutti i caratteri Google disponibili e come utilizzarli.