Fonti CSS (Fonti)

Regole @CSS (RULES)

L'attributo del carattere CSS ti permette di impostare vari stili per il carattere, come la famiglia del carattere del testo, la dimensione e il grassetto, le varianti, ecc.

Proprietà del caratterefont-family,font-style,font-variant,font-weightefont-sizeProprietà del carattere CSS per il testo del contenuto del CSS, come fornire più attributi:

Prossimamente, esploreremo uno per uno questi attributi.

L'attributo CSS ti permette di impostare il nome della famiglia di caratteri del contenuto del testo, l'ordine di priorità dell'uso del carattere.font-familyFamiglia di caratteri

L'attributo CSS ti permette di impostare il nome della famiglia di caratteri del contenuto del testo, l'ordine di priorità dell'uso del carattere.font-familyL'attributo può includere più nomi di carattere comeRiservaCarattere. Prima elenca il carattere desiderato, quindi elenca tutti i caratteri (se non disponibili). Se il browser non supporta il primo carattere, proverà con il successivo. La dichiarazione della famiglia di caratteri potrebbe essere come segue:

p {
　　　　font-family: "Times New Roman", Times, serif;
}

Per ulteriori informazioni su combinazioni di caratteri comuni; controlla i caratteri di sicurezza della rete. Etc.

Stile del carattere

Attraversofont-styleL'attributo imposta lo stile del testo del contenuto dell'elemento.

I valori possibili di questa proprietà sono:normal,italicooblique.

p.one {
　　　　font-style: normal;
}
p.two {
　　　　font-style: italic;
}
p.three {
　　　　font-style: oblique;
}

Dimensione del carattere

font-sizeL'attributo imposta la dimensione del carattere del contenuto del testo dell'elemento.

Ci sono diversi metodi per specificare il valore della dimensione del carattere, ad esempio, utilizzando parole chiave, pixel o ems.

Imposta la dimensione del font con parole chiave

Puoi impostare dimensioni relative in altre parti della pagina impostando la dimensione del font con parole chiave nel body dell'elemento, il che ti permette di scalare facilmente il font in tutto il sito. Specifica una dimensione assoluta con una delle seguenti parole chiave:xx-small,x-small,small,medium,large,x-large,xx-large.

Le dimensioni relative sono specificate con uno dei seguenti termini:smaller, ,larger.

body {
　　　　font-size: large;
}
h1 {
　　　　font-size: larger;
}
p {
　　　　font-size: smaller;
}

Imposta la dimensione del font in pixel

Quando è necessaria precisione in pixel, impostare la dimensione del font in valori in pixel (ad esempio 12px, 16px, ecc.) è una buona scelta. Tuttavia, i risultati possono variare da browser a browser, poiché utilizzano algoritmi diversi per ottenere un effetto simile.

h1 {
　　　　font-size: 24px;
}
p {
　　　　font-size: 14px;
}

Puoi definire la dimensione del font in pixel, ma questo metodo non è molto flessibile, perché gli utenti non possono modificare la dimensione del font tramite le impostazioni del browser. Ad esempio, gli utenti con scarsa vista potrebbero voler impostare la dimensione del font a un valore maggiore di quello specificato. Pertanto, per creare design che includano, evita di usare valori in pixel per la dimensione del font.

Imposta la dimensione del font in Em

emL'unità indica la dimensione del font del padre dell'elemento.

emIl valore della dimensione è dinamico. Definiscifont-sizeproprietà, an emugual a la dimensione del font applicata al padre dell'elemento.

Sefont-sizeImpostare a 20px il valore di a nell'elemento body, allora1em = 20pxe2em = 40px.

Se non hai impostato la dimensione del font in nessun punto della pagina, è il valore predefinito del browser, che è 16px. Pertanto, il valore predefinito è1em = 16pxe2em = 32px.

h1 {
　　　　font-size: 2em; /* 32px/16px = 2em */
}
p {
　　　　font-size: 0.875em; /* 14px/16px = 0.875em */
}

Combinazione di percentuale e Em

Soluzione per ottenere un effetto simile in tutti i browserfont-sizeImpostare il valore di body per l'elemento per percentuale predefinita. Una tecnica popolare èfont-sizeImpostare il valore di62.5%(ovvero il 62.5% di 16px predefinito), equivalente a 10px o 0.625em.

Ora, puoi impostarefont-sizeattraverso l'uso di qualsiasi elemento con unità em, si ottiene una conversione facilmente memorizzabilepxattraverso 10 valori in questo modo10px = 1em,12px = 1.2em,14px = 1.4em,16px = 1.6eme altri. Vedi l'esempio seguente:

body {
　　　　font-size: 62.5%; /* font-size 1em = 10px */
}
p {
　　　　font-size: 1.6em; /* 1.6em = 16px */
}

Spessore del font

font-weightL'attributo specifica lo spessore o il grassetto del font.

I valori possibili dell'attributo font-style sono:normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900einherit.

• valori numerici100- 900La spessore del font specificato è relativo a ciascun numero che rappresenta una maggiore oscurità rispetto al suo predecessore.400enormal&700ugualibold.

• delbolderelighter, mentre altri valori sono valori di spessore dei font assoluti che sono relativi allo spessore del font ereditato.

p {
　　　　font-weight: bold;
}

Poiché la maggior parte dei font può essere utilizzati solo con pesi limitati. Di solito, vengono utilizzati soloNormaleeVisualizzazione in grassetto. Se il font non è disponibile nel peso specificato, verrà selezionato un font sostitutivo che è il più vicino al peso disponibile.

Varietà di caratteri

font-variantL'attributo consente di visualizzare il testo in una forma di maiuscole speciali.

Lettere minuscole e maiuscole oLettere minuscole e maiuscoleDifferisce leggermente dalle lettere maiuscole normali, dove le lettere minuscole vengono visualizzate come una versione più piccola delle lettere maiuscole corrispondenti.

font-variantIl valore dell'attributo potrebbe esserenormal,small-capseinherit.

p {
　　　　font-variant: small-caps;
}