Caratteri CSS

I caratteri sono i componenti più significativi che vediamo su qualsiasi sito Web, quindi mentre costruiscono un sito Web, scegliendo il carattere corretto/adatto è molto importante. I caratteri migliorano l'aspetto visivo di qualsiasi sito Web e l'uso del carattere appropriato aiuta ad aumentare la leggibilità e l'efficacia di qualsiasi sito Web.

Famiglie di carattere generici in CSS

Esistono cinque tipi di famiglie di carattere in CSS I.e. Serif, sans-serif, monospace, fantasia e corsivo. Tutte queste famiglie di carattere sono usate per specificare l'aspetto/forma dei caratteri:

1. Caratteri serif avere piccoli tratti eleganti sul bordo delle lettere
2. Sans-serif I caratteri hanno lettere semplici, nessun colpo. Questi caratteri sono facilmente leggibili.
3. Monospaziale I caratteri sono lettere a larghezza fissa, a livello fisso. Principalmente utilizzato per rappresentare il codice di programmazione
4. Corsivo I caratteri sono molto simili alla scrittura umana
5. Fantasia I caratteri hanno un aspetto decorativo/fantasia

Differenza visiva delle famiglie di caratteri generici

Seguire lo snippet fornirà una linea guida per comprendere la differenza delle forme delle famiglie di carattere generici

Vari tipi di famiglie di carattere generici

La figura di seguito donata presenta i diversi tipi di ogni famiglia di carattere generici:

Proprietà del carattere CSS

In CSS l'aspetto del testo può essere modificato in diversi modi come selezionare lo stile dei caratteri, la famiglia dei caratteri, il colore dei caratteri, le dimensioni del carattere, ecc. Poiché l'uso corretto del carattere ha un grande impatto sul testo e sull'esperienza del lettore, quindi CSS fornisce numerose proprietà del carattere che possono essere utilizzate per personalizzare l'aspetto dei caratteri. Questo articolo mirato alle seguenti proprietà dei caratteri:

• famiglia di font
• stile carattere
• Font-Variant
• dimensione del font
• Font-peso
• Font shorthand

Cominciamo con la famiglia dei caratteri.

Famiglia dei caratteri CSS

Questa proprietà viene utilizzata per specificare la famiglia dei caratteri per qualsiasi elemento HTML E.G. "Arial", "Times New Roman", ecc. Oppure possiamo usare una famiglia di carattere generici E.G. Serif, corsivo, ecc.

Esempio

L'esempio seguente utilizza i caratteri serif per il

caratteri elementi e corsivi per il

elementi:

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

H3
Font-Family: "Times New Roman", Times, Serif;

P
Font-Family: corsivo;

Il pezzo di codice sopra visualizza il seguente output:

CSS Font in stile

Per definire uno stile specifico per un elemento HTML, viene utilizzata la proprietà in stile carattere. La proprietà in stile carattere può avere un valore normale, obliquo o corsivo.

Esempio

Nel pezzo di codice seguente, lo stile del carattere di

L'elemento viene modificato in stile corsivo:

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

H3
Font in stile: corsivo;

Lo snippet sopra mostra il seguente risultato:

I valori obliqui e normali possono essere utilizzati per la proprietà in stile carattere, il valore obliquo produrrà risultati molto simili allo stile corsivo.

CSS Font-Variant

Può prendere un valore "piccoli capipi" che converte le lettere in piccole lettere di capitale (maiuscole ma di dimensioni più piccole).

Esempio

Il codice di seguito dimenui dimostrerà l'effetto della proprietà variante di carattere sul

elemento:

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

P
Font-Variant: Small-Caps;

Il codice sopra fornirà il seguente risultato:

Size di carattere CSS

La proprietà delle dimensioni del carattere è sussalata per l'impostazione delle dimensioni del testo e il valore per la dimensione del carattere può essere specificato come piccolo, grande, medio, ecc., o in termini di Px, EM, %, ecc.

Il codice di seguito dà specifica la dimensione del carattere per il

elemento come extra-large:

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

P
Font-Size: X-Large;

Lo snippet sopra genera il seguente risultato:

L'output verifica che il testo di

Gli elementi sono più grandi della dimensione del carattere normale.

Font-peso CSS

La proprietà del carattere di carattere viene utilizzata per impostare il po 'di carattere in termini di alcuni valori specifici come grassetto, normale, più leggero, ecc. Può determinare il peso in termini di un valore numerico come 100, 200, 300, ecc. Il valore maggiore specifica un carattere più audace/più spesso mentre il valore più piccolo rappresenta il carattere più sottile.

Il seguente pezzo di codice imposta il ponte di carattere per il

Elemento usando il valore "audace":

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

P
Font-weight: audace;

Lo snippet sopra produce la seguente uscita:

Font shorthand Property in CSS

CSS fornisce una proprietà shorthand per tutte le proprietà sopra menzionate. Usando stenografia "font" Proprietà possiamo impostare lo stile del carattere, la famiglia, la variante, ecc. in una sola riga.

L'esempio seguente mostra come utilizzare la proprietà di stenografia del carattere in CSS:

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

P
FONT: grassetto 30px corsivo;

Lo snippet di cui sopra specifica il carattere, le dimensioni del carattere e la famiglia del carattere in una dichiarazione utilizzando la proprietà di stenografia:

L'output di cui sopra verifica che la proprietà abbreviata imposta correttamente il peso, le dimensioni e la famiglia del carattere per il

elemento.

Conclusione

Le famiglie di carattere determinano la forma dei caratteri, mentre le proprietà in stile carattere, font-peso, dimensioni dei caratteri e caratteristiche del carattere determinano rispettivamente lo stile, il peso, le dimensioni e l'effetto delle piccole capspe dei caratteri. Tutte queste funzionalità possono essere eseguite sui caratteri in un'unica dichiarazione usando la proprietà "Carattere".

Questo articolo presenta una panoramica completa di quelli che sono i caratteri CSS, le famiglie di carattere generici e come impostare lo stile del carattere.