Kerning di carattere CSS

Un foglio di stile a cascata, CSS è il codice di stile costituito da tag che vengono utilizzati per aggiungere stile ai contenuti HTML che vengono creati utilizzando i tag HTML. HTML e CSS hanno importanza per creare e progettare il front-end dei siti Web. Un foglio CSS contiene diverse proprietà applicate a ciascun contenuto HTML in modi specifici. Il contenuto HTML di base è il "testo". Come sappiamo, ogni volta che vediamo un sito Web o una pagina Web, i testi sono sempre presenti sotto forma di paragrafo, intestazione o qualsiasi collegamento.

Abbiamo anche visto le lettere ampliate di una sola parola da allineare con qualsiasi altra frase allo stesso modo. Questo è tutto a causa di una proprietà CSS relativa al testo. Questo articolo spiegherà il testo del contenuto HTML e una delle proprietà che dobbiamo applicare al testo che è il kerning.

Introduzione a HTML e CSS

Un tag HTML contiene due sezioni: una testa e un corpo . Tutti i contenuti HTML sono scritti all'interno della sezione del corpo dei tag HTML. HTML contiene principalmente contenuti che hanno tag sia di apertura che di chiusura.

Talking CSS deriva dai suoi tre tipi: CSS in linea, interni ed esterni. Il CSS interno è dichiarato nella sezione principale del corpo HTML. La sua ulteriore spiegazione viene applicata al momento dell'implementazione. Allo stesso modo, la proprietà di Kerning di carattere viene applicata nel tag di stile della testa. Mentre il testo viene dichiarato all'interno della sezione del corpo sotto forma di paragrafo o intestazione.

CSS Kerning Proprietà del carattere

Un kerning di carattere è la proprietà correlata al testo. Una proprietà di carattere è lo stile di testo che include colore, stile del carattere, allineamento, ecc. Allo stesso modo, Kerning è una delle proprietà del testo CSS. Viene applicato alle lettere della parola di qualsiasi frase. Spiega quanto sono distanziate le lettere di una parola. Il valore del kerning può essere un segno positivo o un segno negativo.

• Valore positivo: Un valore positivo della spaziatura delle lettere fa diffondere i caratteri della lettera o si espandono più lontano. Lo spazio tra due lettere è aumentato dal valore che applichiamo.
• Valore negativo: Un segno negativo con un valore della spaziatura delle lettere si avvicina il carattere l'uno all'altro minimizzando o escludendo la distanza tra il carattere e il carattere allo stesso modo.

Un valore di spaziatura delle lettere può essere fornito in unità diverse. Ad esempio, i valori sono riportati in pixel, em e in una situazione normale. Ogni unità ha un effetto diverso. Il valore normale ha la differenza di spazio minore rispetto al carattere senza alcun effetto di kerning. L'effetto del valore decimale è superiore al valore delle cifre. La sintassi di questa proprietà è la seguente:

Font-kerning: valore;

Oltre al kerning del carattere, possiamo anche usare la proprietà che spazia le lettere. Ora, implementiamo alcuni esempi per spiegare il concetto di Kerning.

Esempio 1: differenza con e senza kerning

In questo esempio, abbiamo usato la proprietà di spaziatura delle lettere con un valore normale per verificare la differenza tra i caratteri che non hanno applicato l'effetto di kerning e quelli che hanno applicato questo effetto.

Considera la sezione del corpo del codice HTML. Usa un tag di intestazione per dichiarare una semplice intestazione

. Quindi, usa i tag di paragrafo. Entrambi i paragrafi sono applicati con il nome della classe CSS. Questi nomi di classi sono dichiarati all'interno del tag in stile Head che verrà discusso più avanti.

testo con kerning di carattere.

Allo stesso modo, viene anche dichiarato il secondo tag di paragrafo.

Nel tag di stile, abbiamo usato entrambi i casi dichiarati nei tag di paragrafo. La classe di kerning contiene tutte le proprietà relative al carattere, inclusa la normale proprietà di kerning. Questa proprietà di kerning si riferisce al valore di spaziatura delle lettere che è considerato normale. Successivamente, la famiglia dei caratteri viene applicata come serif e anche la proprietà di dimensioni viene applicata al testo.

.kerning
Font-kerning: normale;
Font-Family: Serif;
Font-size: 20px;

Considerando che, nella classe riguardante, la proprietà di kerning è presa come nessuno. Ciò significa che il testo in questo paragrafo è dichiarato senza un cambiamento nella spaziatura delle lettere delle parole.

.Nonkerning
Font-kerning: nessuno;

Il resto delle proprietà rimane lo stesso.

Salva il codice nel file di testo con un'estensione HTML. In questo modo, vedremo che l'icona del file viene cambiata nell'icona del browser invece del simbolo dell'editor. Eseguire quel file in Chrome per vedere l'output.

Vedrai che nel primo paragrafo non vi è alcun effetto in cui abbiamo usato la proprietà di spaziatura delle lettere o l'effetto di kerning come valore normale. Quando confrontiamo il primo paragrafo con il secondo paragrafo che non ha alcun effetto di kerning, non troviamo cambiamenti tra di loro.

Esempio 2:

Questo esempio contiene i diversi valori della proprietà di spaziatura delle lettere. Nel tag del corpo, abbiamo usato cinque paragrafi e ogni paragrafo è dichiarato con una classe diversa. Il nome della classe rivela il funzionamento dei valori che vengono applicati al momento della dichiarazione. In ogni classe, viene utilizzato un valore diverso.

Ad esempio, usiamo il ".Classe EM-Wider ”con un valore 1EM. Questo rende il testo più ampio degli altri. Mentre il -0.09em fa sì che il testo diventa più stretto.

.EM-Tight
Spazio di lettere: -0.09em;

Ora, salva il codice e vedremo il risultato. Tutte le linee vengono visualizzate con la diversa distanza di lettere tra di loro. Il primo paragrafo è quello normale. Il quarto paragrafo con un valore decimale negativo si avvicinò le lettere l'una all'altra.

Esempio 3:

Questo esempio coinvolge la proprietà della prima riga. Come indica il nome, la proprietà è implementata nella prima riga. Uno stile in linea viene applicato a coloro che hanno la proprietà di larghezza.

Il tag di stile contiene il tag di prima riga del paragrafo che mostra che è interessata solo la prima riga di entrambi i paragrafi.