In Fogli in stile a cascata (CSS), La proprietà delle dimensioni del carattere possiede grande importanza. Garantisce che il testo si distingue e arricchisce il foglio con una gerarchia visiva. La gerarchia aiuta a distinguere le intestazioni e le sottotitoli dal testo normale. La proprietà CSS Font-Size utilizza unità a più dimensioni come Valori pixel, em, larghezza e percentuale. Inoltre, utilizza anche diverse intestazioni che vanno

A

.

Questo articolo discuterà della proprietà di dimensioni dei caratteri in CSS. Insegneremo anche a usare esplicitamente il Proprietà di carattere predefinite e personalizzate per elementi di testo. Quindi iniziamo!

Proprietà CSS Font-Size

In CSS, la proprietà di dimensioni dei caratteri viene utilizzata per l'impostazione delle dimensioni di un elemento di testo e il suo valore può essere "Predefinito" o "dimensione personalizzata".

Nelle sezioni di seguito, parleremo brevemente dei valori CSS di dimensioni predefiniti e personalizzati nella proprietà di dimensioni dei caratteri.

Proprietà CSS Font-Size Utilizzo di valori predefiniti

CSS fornisce valori predefiniti per l'impostazione delle dimensioni dei caratteri dei testi. La proprietà CSS di dimensioni dei caratteri viene utilizzata quando abbiamo le informazioni relative alla dimensione fisica dell'output. Inoltre, i browser non consentono di modificare la dimensione del testo per motivi di cattiva accessibilità.

Dai un'occhiata al seguente elenco dei valori delle proprietà del carattere predefinito CSS:

• XX-Small
• X-Small
• Piccolo
• medio
• Grande
• X-Large
• Xx-grande

Ora, diamo un'occhiata alla sintassi di fornire valori predefiniti alla proprietà di dimensioni dei caratteri:

Sintassi di fornire valori predefiniti alla proprietà di dimensioni dei caratteri

Font-size: Medium | grande | x-large | xx-large | xx-small | x-small | piccolo |;

Qui, dobbiamo aggiungere un valore specifico per il "dimensione del font" proprietà.

Esempio: fornire valori predefiniti alla proprietà di dimensioni dei caratteri

In questo esempio, specificheremo diversi valori di proprietà di dimensioni del carattere predefinite per elementi di paragrafo:

Questo è un testo in grande xx.

Questo è un testo di grande grandezza.

Questo è un testo di grandi dimensioni.

Questo è il testo medio.

Questo è un piccolo testo.

Questo è il testo x-lis.

Questo è il testo xx-lis.

Apri il file HTML in un browser dopo aver aggiunto il codice specificato. In tal modo, il testo dei paragrafi avrà il seguente formato:

Nella prossima sezione, dimostreremo l'uso di "costume" Valori della proprietà di dimensioni dei caratteri.

Proprietà CSS Font-Size Utilizzo di valori personalizzati

Fornendo il Valori personalizzati alla proprietà di dimensioni dei caratteri, Puoi impostare il misurare di un carattere secondo gli elementi circostanti e questa proprietà consente anche a un utente di modificare la dimensione del carattere nei browser.

In CSS, la proprietà di dimensioni dei caratteri comprende i seguenti valori personalizzati:

• Font-dimensioni con pixel
• Font-Size con Em
• Font-dimensioni con valori percentuali
• Size di carattere reattivo

Proprietà CSS Font-Size con pixel

In questo metodo, "Pixel" vengono utilizzati per impostare il valore della proprietà delle dimensioni del carattere, offrendo il controllo completo del controllo delle dimensioni del testo all'utente. È un valore statico totalmente indipendente.

Esempio: proprietà CSS Font-Size con pixel

Ora imposteremo le dimensioni del carattere degli elementi di paragrafo in base a diversi valori di pixel come "50px", "40px" e "30px":

Assegniamo "50px" a questo testo.

Assegniamo "40px" a questo testo.

Assegniamo "30px" a questo testo.

Produzione

Come puoi vedere dall'output dato, la dimensione del testo dei paragrafi è impostata in base ai valori dei pixel specificati.

Proprietà CSS Font-Size con EM

IL "Em" Valori del CSS Proprietà delle dimensioni del carattere vengono utilizzati per impostare la dimensione del testo in base alla dimensione del carattere principale nei browser. Molti sviluppatori preferiscono "Em" sui "pixel" Perché offre un buon livello di compatibilità per i browser.

Nota: In un browser, la dimensione del testo predefinita è impostata su 16 pixel e uno em, che significa che 1 em = 16 pixel.

Dai un'occhiata all'esempio di seguito:

Esempio: proprietà CSS Font-Size con EM

In questo esempio, imposteremo il "Em" valore per gli elementi di testo uguali all'esempio precedente. Per fare ciò, divideremo il numero di pixel "16" e quindi specificare il valore risultante come valore della proprietà di dimensioni dei caratteri degli elementi aggiunti:

Questo è intestazione 1

Questa è la testa 2

Questo è un paragrafo.

L'output indicato significa che abbiamo applicato con successo la proprietà delle dimensioni del carattere "Em" valori:

Proprietà CSS Font-Size con valori percentuali

Possiamo anche impostare la dimensione del carattere rispetto a percentuale, E in questo metodo, la percentuale di carattere può essere aumentata 100%.

Esempio: proprietà CSS Font-Size con valori percentuali

Ora assegneremo valori percentuali diversi a "dimensione del font" Proprietà degli elementi del paragrafo:

Questo ha un testo del 130% di carattere.

Questo ha un testo del 120% di carattere.

Questo ha un testo del 90% di carattere.

Questo ha un testo del 70% di carattere.

Produzione

Proprietà CSS reattiva delle dimensioni di un carattere

Usando CSS Proprietà reattiva delle dimensioni del carattere, È inoltre possibile impostare la dimensione del testo in base alla larghezza della finestra del tuo browser. A tale scopo, il "VW" il valore dell'unità viene utilizzato, mentre 1VW = 1% della larghezza della vista.

Nota: Se l'utente non definisce la dimensione del carattere del testo, la dimensione predefinita di un testo è uguale a 16 px o 1em.

Esempio: proprietà CSS reactive di dimensioni del carattere

Esempio di testo reattivo

Ridimensionare la finestra del browser per verificare la scalabilità del testo.

Produzione

Nell'esempio di cui sopra, il testo può essere ridimensionato in base al browser e seguirà le dimensioni della finestra del browser.

Conclusione

In CSS, la proprietà di dimensioni dei caratteri viene utilizzata per l'impostazione delle dimensioni di un elemento di testo e il suo valore può essere "Predefinito" o "personalizzato". Più unità di misurazione come Valori pixel, EM, viewport, larghezza e percentuale sono specificati come valori della proprietà di dimensioni dei caratteri. Questo articolo ha discusso della proprietà CSS di dimensioni dei caratteri e ha dimostrato il metodo per utilizzare esplicitamente il Proprietà predefinita e personalizzata di carattere Valori per elementi di testo.