CSS Font Kerning

CSS er et kaskaderende stilark. HTML og CSS er kjent for å ha en betydning i å skape og designe frontend på nettstedene. Et CSS -ark inneholder flere egenskaper som brukes på hvert HTML -innhold på spesifikke måter. Det grunnleggende HTML -innholdet er "teksten". Som vi vet, når vi ser et nettsted eller en webside, er tekster alltid til stede på det enten i form av et avsnitt, overskrift eller en hvilken som helst lenke.

Vi har også sett de utvidede bokstavene i et enkelt ord for å samsvare med enhver annen setning likt. Dette er alt på grunn av en CSS -egenskap relatert til teksten. Denne artikkelen vil forklare HTML -innholdsteksten og en av egenskapene som vi må bruke på teksten som er fontkerning.

Introduksjon til HTML og CSS

En HTML -kode inneholder to seksjoner: et hode og en kropp . Alt HTML -innholdet er skrevet i kroppsdelen av HTML -taggene. HTML inneholder stort sett innhold som har både åpnings- og lukkekoder.

Talking CSS er avledet fra sine tre typer: Inline, Internt og ekstern CSS. Den interne CSS er erklært i hodeseksjonen av HTML -kroppen. Dens ytterligere forklaring blir brukt på tidspunktet for implementeringen. Tilsvarende brukes fontkerningegenskapen i hodet til hodet. Mens teksten er erklært inne i kroppsdelen i form av et avsnitt eller overskrift.

CSS Kerning Property of Font

En fontkerning er eiendommen som er relatert til teksten. En fontegenskap er tekststilen som inkluderer farge, skriftstil, justering osv. Tilsvarende er Kerning en av egenskapene til CSS -tekst. Det brukes på bokstavene i ordet om enhver setning. Det forklarer hvor mye bokstavene i et ord er fordelt. Verdien av Kerning kan være et positivt tegn eller et negativt tegn.

• Positiv verdi: En positiv verdi av bokstavavstand gjør at bokstavkarakterene sprer seg eller utvider seg lenger fra hverandre. Plassen mellom to bokstaver økes med verdien vi bruker.
• Negativ verdi: Et negativt tegn med en verdi av bokstavavstanden bringer karakteren nær hverandre ved å minimere eller ekskludere avstanden mellom karakter til karakter likt.

En bokstavavstandsverdi kan gis i forskjellige enheter. For eksempel er verdiene gitt i piksler, EM og i en normal situasjon. Hver enhet har en annen effekt. Normalverdien har minst mulig romforskjell sammenlignet med skriften uten noen kerning -effekt. Effekten av desimalverdien er mer enn sifferverdien. Syntaksen til denne egenskapen er som følger:

Font-Kerning: Verdi;

Annet enn Font Kerning, kan vi også bruke brevavstandsegenskapen. Nå implementerer vi noen eksempler for å forklare konseptet med fontkerning.

Eksempel 1: Forskjell med og uten kerning

I dette eksemplet brukte vi brevavstanden med en normal verdi for å sjekke forskjellen mellom tegnene som ikke har brukt Kerning -effekten og de som brukte denne effekten.

Tenk på kroppsdelen av HTML -koden. Bruk en overskrifter for å erklære en enkel overskrift

. Bruk deretter avsnitts taggene. Begge avsnittene brukes med CSS -klassenavnet. Disse navnene på klasser er erklært i hodestil -taggen som vil bli diskutert senere.

tekst med fontkerning.

Tilsvarende er også andre avsnitts taggen erklært.

I stilkoden brukte vi begge sakene som er erklært i avsnittsmerker. Kerning-klassen inneholder alle fontrelaterte egenskaper inkludert den normale font-kerning-eiendommen. Denne font-Kerning-egenskapen refererer til bokstavavstandsverdien som blir tatt som normal. Deretter brukes fontfamilien som serif, og størrelsesegenskapen brukes også på teksten.

.Kerning
Font-Kerning: Normal;
Font-Family: Serif;
Font-størrelse: 20px;

Mens den angående klassen er font-kjerringsegenskapen tatt som ingen. Dette betyr at teksten i dette avsnittet er erklært uten endring i brevavstanden til ordene.

.ikke -kjerring
Font-Kerning: Ingen;

Resten av eiendommene forblir de samme.

Lagre koden i tekstfilen med en HTML -utvidelse. Ved å gjøre dette, vil vi se at filikonet blir endret til nettleserikonet i stedet for redaktørens symbol. Utfør filen i krom for å se utdataene.

Du vil se at det ikke er noen effekt i første ledd der vi brukte brevavstandseiendommen eller font-kerning-effekten som en normal verdi. Når vi sammenligner første ledd med andre ledd som ikke har noen kerning -effekt, finner vi ingen endringer mellom dem.

Eksempel 2:

Dette eksemplet inneholder de forskjellige verdiene for bokstavavstandens egenskap. I kroppskoden brukte vi fem avsnitt og hvert avsnitt erklæres med en annen klasse. Klassens navn avslører arbeidet med verdiene som brukes på erklæringstidspunktet. I hver klasse brukes en annen verdi.

For eksempel bruker vi ".EM-Wider ”-klasse med en 1M-verdi. Dette gjør teksten bredere enn de andre. Mens -0.09M får teksten til å bli strammere.

.em-tight
Brevavstand: -0.09em;

Lagre koden nå, så ser vi resultatet. Alle linjene vises med den forskjellige bokstavavstanden mellom dem. Første avsnitt er det normale. Fjerde avsnitt med en negativ desimalverdi brakte brevene nær hverandre.

Eksempel 3:

Dette eksemplet involverer eiendommen til den første linjen. Som navnet indikerer, implementeres eiendommen på den første linjen. En inline -stil brukes på de som har breddeegenskapen.

Stilmerket inneholder avsnittet First Line -taggen som viser at bare den første linjen i begge avsnitt er berørt.