Hvordan sette font kant i CSS

Hvordan sette font kant i CSS

Med CSS kan du style skrifter på flere måter. For eksempel kan vi sette grensen for en skrift for å gjøre den mer attraktiv med hensyn til utseendet. En skriftgrense blir også lagt til når det er påkrevd å skissere litt tekst. Det tillater deg også å style teksten og legge til farge og bredde i henhold til dine preferanser.

I denne guiden vil vi lære om å sette en skriftgrense i CSS.

Hvordan sette font kant i CSS?

I CSS kan vi bruke følgende egenskaper for å sette fontgrense:

  • -Webkit-tekst-slag eiendom
  • Tekstskyggeegenskaper

Så la oss komme i gang.

Metode 1: Bruk -Webkit-Text-Stroke CSS-egenskapen for å sette font kant

Tekstslagegenskapen er spesielt introdusert for å sette grensen til skrifter. Eiendomstekststrykket er imidlertid ikke inkludert i W3C-standardene. Dette er grunnen til nøkkelordet "-Webkit”Blir lagt til den for å utføre den spesifiserte funksjonaliteten. The -Webkit-Text-Property Works on Safari, Google Chrome og Firefox Browser.

Ta en titt på følgende eksempel for å vite mer om å sette fontgrensen ved å bruke -webkit-tekst-slagegenskapen.

Eksempel

Her er teksten som vi ønsker å sette grensen til:

Innenfor HTML -filen vår har vi lagt til en tekst som overskrift ved hjelp av "

Html

Beste pedagogiske nettsted

For å sette grensen rundt skriften, vil vi bruke CSS “-Webkit-tekst-slag“Eiendom med“1px”Grensen og gi den“rød”Farge. Vi vil også spesifisere tekstfargen som blå ved å bruke "farge”Eiendom:

CSS

H2
-Webkit-tekst-Stroke: 1px rød;
Farge: blå;

Nå lagrer vi koden og åpner HTML -filen i nettleseren:

Det kan sees at fontgrensen har blitt brukt med suksess ved å bruke -webkit-tekst-slagegenskapen og den ekstra teksten ser stilig ut.

Metode 2: Bruk tekstskyggeegenskaper for å sette fontgrense

Tekstskygge”Eiendom er i seg selv et selvforklarende begrep, da den brukes til å legge til skygger i tekster. Imidlertid kan det manipuleres for å sette skriftgrensen effektivt.

Så la oss bruke denne CSS -egenskapen på samme tekst for å sette grensen rundt den.

Eksempel

Her vil vi få den røde skyggen til å pop ut “1px”Fra hver side ved hjelp av tekstskyggeegenskapen,”-1px 0px 0px”Vil spesifisere venstre sideskygge,”1px 0px 0px”Vil spesifisere skyggen på høyre side,”0px -1px 0px”Vil spesifisere skyggen av toppsiden og“0px 11px 0px”Vil spesifisere skyggen av bunnsiden:

CSS

H2
Tekstskygge:
-1px 0px 0px rød,
1px 0px 0px rød,
0px -1px 0px rød,
0px 1px 0px rød; farge: blå;

Produksjon

Vi har samlet forskjellige tilnærminger for å sette fontgrenser i CSS.

Konklusjon

For å sette fontgrensen i CSS, “-Webkit-tekst-slag”Eiendom og“Tekstskygge”Eiendom kan brukes til å legge til skriftgrensen på visse måter. Eiendomstekststrykket er ikke inkludert i W3C-standardene; Imidlertid kan det brukes med nøkkelordet -Webkit. Denne oppskrivningen har forklart to metoder som kan hjelpe deg med å sette fontgrenser i CSS.