HTML5 - Lavorare con i caratteri - Parte 1

Uno degli aspetti fondamentali quando si lavora con il testo in HTML sono i cambiamenti di immagine che possono avvenire semplicemente cambiando il font delle lettere, tuttavia ci sono due aspetti dei professionisti che lavorano in relazione a questo, i designer che vogliono cambiare ogni aspetto della tipografia e i programmatori che, pur desiderando lavorando con loro non vogliono fare cambiamenti così profondi su questo.
Proprietà del carattere
Prima di lavorare con le fonti, faremo una revisione delle loro proprietà per conoscerne i retroscena:

• famiglia di font: Specifica la famiglia di caratteri per un blocco di testo.
• dimensione del font: Specifica la dimensione del carattere per un blocco di testo.
• stile carattere: Specifica lo stile del carattere, può essere normale, corsivo, obliquo.
• font-variant: Specifica se il testo del blocco può essere visualizzato o meno in maiuscoletto, i suoi possibili valori sono maiuscoletto e normale.
• peso del carattere: Specifica il peso del carattere per un blocco di testo, ovvero il suo spessore, i suoi valori possono essere normali, in grassetto, in grassetto, più chiari.
• font: Scorciatoia che consente di specificare il carattere in una singola riga.

Selezione di una fonte
La proprietà famiglia di font Determiniamo il gruppo di caratteri che verrà utilizzato stabilendo un ordine di preferenza in modo che se uno non è disponibile, venga passato a quello che segue in ordine di preferenza. Il browser inizia con il primo carattere nell'elenco e continua a provare per ciascuno dei caratteri nell'ordine stabilito finché non ne trova uno che può utilizzare.
Ciò accade perché potremmo richiedere di utilizzare caratteri installati sul PC di un utente o che appartengono a un sistema operativo specifico, in modo che se un altro utente non soddisfa i requisiti, possiamo controllare come influenzerà il nostro documento.
Vediamo infine un elenco di font generici che dovrebbero essere disponibili in maniera standard per tutti i sistemi e con i quali non dovremmo avere problemi.

• grazie
• sans-serif
• corsivo
• fantasia
• monospazio

Molto bene poiché abbiamo coperto l'aspetto teorico di cosa sia la gestione dei sorgenti vediamo esempi con codice che è dove otterremo la nostra conoscenza di come mettere in pratica tutto ciò che abbiamo studiato:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

In questo codice vediamo che un carattere non convenzionale è stato definito nella famiglia dei caratteri poiché è un carattere proprietario HelveticaNeue Condensed e poi come seconda preferenza poniamo monospazio Vediamo come possiamo vederlo nel browser, per ciascuno dei casi definiti.
[allegato = 861: html5fuentes.jpg.webp]
A sinistra dell'immagine abbiamo il caso in cui non esiste il font che era stato posizionato come prima scelta, ovvero il font monospazio, sul lato destro vediamo il carattere proprietario.
Con questo finiamo il tutorial, avendo conosciuto le basi teoriche e mettendole in pratica, siamo ora in grado di giocare un po' con i sorgenti della nostra applicazione e ottenere risultati visivamente più accattivanti e in linea con ciò che vogliamo.
Puoi continuare a leggere la Parte 2 di questo Tutorial.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo