Dimensione Del Carattere Javascript

| | | | | | | | | |

La proprietà CSS font-size imposta la dimensione del carattere di qualsiasi elemento di testo sulla tua pagina o sito web. La proprietà font-size può essere applicata a qualsiasi classe, ID o elemento che include contenuto di testo. La proprietà accetta valori in px, em, rem, vw, vh e l’utilizzo di parole chiave.

La maggior parte degli sviluppatori utilizza una combinazione di diverse dimensioni dei caratteri per lo stile di una pagina web. Ad esempio, uno sviluppatore web può utilizzare un carattere grande per i titoli e un carattere più piccolo per il corpo del testo e altri. Tanti chiedono: come si cambia la dimensione del carattere in CSS o HTML?

Il CSS font-size consente agli sviluppatori di impostare la dimensione del carattere in un paragrafo o riga di testo in una pagina web.

Questo tutorial discute, con riferimento ad esempi, come utilizzare il font-size< /codice> proprietà. Seguire questa guida ti consente di essere un esperto nel modificare le dimensioni del testo.

CSS font-Size

Lo stile dei caratteri appropriato è una parte importante del web design . Il testo senza stile causa difficoltà di lettura tra i visitatori, il che quasi certamente si traduce in un’esperienza spiacevole sul sito web.

Esistono molti stili CSS per i caratteri che possono essere utilizzati per personalizzare l’aspetto del testo, come font-weight, font-family, decorazione del testo e colore. Un’altra proprietà importante è font-size, che controlla la dimensione di un font in un blocco di testo.

La sintassi per la proprietà CSS font-size è:

sizeValue è la dimensione del carattere che si desidera utilizzare per un blocco di testo. Esistono diversi modi per specificare la dimensione del carattere utilizzata da un blocco di testo. I metodi di cui parleremo in questo articolo sono:

  • pixels
  • em
  • root em
  • unità di visualizzazione
  • parole chiave

Esploriamo un esempio di come utilizzare ogni approccio alla dimensione del carattere in una pagina web.

Impostare la dimensione del carattere utilizzando i pixel

Uno dei modi più comuni per impostare la dimensione di un carattere è utilizzare i pixel.< /p>

I pixel sono una buona unità di misura perché ti permettono di essere preciso. L’unità pixel non è in gran parte influenzata dai sistemi operativi o dai browser web. Un pixel su uno schermo è un pixel su un altro. Il valore in pixel che specifichi apparirà più o meno allo stesso modo su diversi browser.

Tuttavia, l’uso dei pixel per impostare la dimensione di un carattere in un blocco di testo ha una limitazione: l’accessibilità. Le dimensioni dei caratteri definite utilizzando i pixel non sono accessibili perché alcuni browser non consentono agli utenti di personalizzare le dimensioni dei caratteri. Gli utenti ipovedenti, ad esempio, potrebbero avere difficoltà a utilizzare un sito che utilizza i pixel per definire le dimensioni dei caratteri.

Supponiamo che stiamo creando un sito Web con una dimensione del carattere di 28px per tutti gli elementi

e 12px per tutti gli elementi

. Potremmo utilizzare il seguente codice per eseguire questa operazione:

Nel nostro codice, abbiamo usato un Selettore CSS imposta la dimensione del carattere di tutti gli elementi

su 28px e di tutti gli elementi

a 12px. Il seguente frammento mostra come appaiono questi elementi con le nostre nuove dimensioni dei caratteri:

Fai clic su ’Immagine nell’angolo in alto a destra della finestra in alto per eseguire il codice.

Un altro modo comune di impostare la dimensione di un font in CSS è quella di utilizzare le dimensioni em. L’unità di misura em si riferisce alla dimensione del carattere di un elemento genitore. Se imposti la dimensione di un carattere su 2em, la dimensione del carattere sarà il doppio di quella dell’elemento genitore.

Un esempio di ridimensionamento dei caratteri CSS con ems

Ad esempio, supponi di avere un paragrafo di testo memorizzato in una casella. La dimensione del carattere della casella è 20px. Se hai specificato che la dimensione del carattere del paragrafo di testo è 1em, la dimensione del carattere del paragrafo sarà 20px. è uguale alla dimensione del carattere dell’elemento padre.

Se non hai impostato una dimensione del carattere per un elemento padre, il browser utilizzerà il valore predefinito specificato per quel browser. Di solito è 16px. Di conseguenza, se non hai specificato alcuna dimensione del carattere, 1em è per impostazione predefinita 16px, 2em è per impostazione predefinita 32px.

Supponiamo che la dimensione del carattere della nostra pagina web sia 16px. Vogliamo che tutti i paragrafi di testo appaiano usando quella dimensione del carattere, il che significa che dovremmo usare il valore 1em. Inoltre, vogliamo che tutte le nostre intestazioni appaiano con una dimensione del carattere di 24px, che è uguale a 1.5em.

Potremmo usare il seguente codice per eseguire questa operazione:

Nel nostro codice, la dimensione di tutti i paragrafi sarà 16px (1em = 16px di default) e tutti gli elementi

saranno 24px (1.5em = 24px).

Ecco come apparirebbe il nostro testo nella pagina web:

Nell’esempio sopra, puoi vedere i nuovi stili sia per il nostro

che per

elementi.

Dovresti notare che se il nostro

è apparso all’interno di una casella con un’altra dimensione del carattere, la dimensione del nostro

cambierebbe. Questo perché i valori em ereditano la dimensione del carattere dei loro genitori.

Imposta la dimensione del carattere usando Root em

Abbreviazione per root em, rem è una nuova unità di misura introdotta nei CSS3 che può essere utilizzata per impostare la dimensione del carattere. I valori che utilizzano rem sono relativi all’elemento radice , invece del elemento genitore.

I valori

rem sono utili perché consentono di specificare un valore relativo all’intero documento. In questo modo, la dimensione del testo non sarà influenzata se il l’elemento genitore ha un valore em diverso.

Supponiamo di avere una pagina web con la dimensione del carattere predefinita di 16px. Come nel nostro esempio precedente, vogliamo che tutti i

appaiano in 24px e tutti i paragrafi appaiano in 16px. Potremmo impostare queste dimensioni dei caratteri utilizzando il seguente codice:

Il nostro codice è quasi lo stesso del nostro esempio precedente. L’unica differenza è che l’unità di misura che usiamo è rem invece di em. In questo esempio, le dimensioni dei nostri caratteri saranno ancora 24px e 16px rispettivamente per le intestazioni e i paragrafi di primo livello. Questo perché la dimensione del carattere predefinita della nostra pagina web è 16px.

Imposta la dimensione del carattere utilizzando le parole chiave

Ci sono due tipi di parole chiave che puoi utilizzare per impostare la dimensione di un carattere in CSS.

Le parole chiave assolute vengono utilizzate per impostare una dimensione del carattere che rimane la stessa, indipendentemente dalle modifiche alla pagina web. Le parole chiave che puoi utilizzare per impostare una dimensione assoluta del carattere sono le seguenti:

I valori specificati tra parentesi si basano su un browser la cui dimensione del carattere predefinita è 16px.

Parole chiave relative, dall’altro mano, imposta una dimensione del carattere che cambierà a seconda della dimensione del carattere altrove nella pagina web. Le parole chiave relative che puoi usare sono: più piccolo e più grande. Queste parole chiave sono utili perché ti permettono di cambiare la dimensione dei tuoi caratteri quando cambiano le altre dimensioni dei caratteri sulla pagina.

Supponiamo di voler impostare la dimensione di tutti gli elementi

su una pagina su 24px (x-large) e tutti i

; elementi a 18px (grande). Potremmo farlo usando questo codice:

Fai clic su ’Image pulsante nell’editor di codice sopra per vedere l’output del nostro HTML /CSS code.

Le dimensioni dei caratteri per i nostri tag

e

sono 24px e 18px, rispettivamente. Tuttavia, non abbiamo specificato queste dimensioni utilizzando i pixel. Invece, abbiamo utilizzato le parole chiave per la dimensione del carattere predefinite offerte dal browser.

Imposta la dimensione del carattere utilizzando le unità di visualizzazione

Le unità di visualizzazione vengono calcolate come percentuale della dimensione della finestra del browser. Le due unità di visualizzazione supportate dai CSS sono: altezza di visualizzazione (vh) e larghezza di visualizzazione (vw).

Poiché le unità di visualizzazione sono una percentuale della dimensione della finestra del browser, 1vh è uguale all’1% dell’altezza della finestra, ad esempio. Quindi, se hai un viewport largo 1000px, 1vh equivale a 10px.

Utilizzare le unità di viewport è utile perché la dimensione dei tuoi caratteri cambierà quando ridimensioni la finestra del browser. Questo, a sua volta, ti consente di offrire un’esperienza utente più accessibile, adattabile a browser e dispositivi di diverse dimensioni.

Supponiamo di voler creare un sito le cui intestazioni sono il 4% della larghezza del viewport e i cui paragrafi sono l’1% della larghezza dell’area visibile. Potremmo farlo usando questo codice:

Fai clic sul ’Immagine pulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.

Se ridimensioni il browser, la dimensione di queste intestazioni cambierà.

Conclusione

La proprietà font-size viene utilizzata in CSS (e quindi HTML) per modificare la dimensione dei caratteri. Accetta un numero di unità di misura in cui è possibile visualizzare le dimensioni dei caratteri, inclusi pixel, em, rem, parole chiave e unità di visualizzazione. Può essere applicato a classi e ID CSS, nonché agli elementi stessi.

Questo tutorial è stato illustrato le basi della dimensione dei caratteri CSS. Ora sei pronto per iniziare a utilizzare l’attributo font-size come un esperto.


Dimensione Del Carattere Javascript __del__: Questions

Dimensione Del Carattere Javascript absolute: Questions

Shop

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Best laptop for Zoom

$499

Best laptop for Minecraft

$590

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method