Hvordan fet tekst i CSS

De dristige vil få elementene til å virke tykke, eller det vil vises med et sterkt eller klart utseende. Den dristige teksten er teksten som virker tykkere enn den enkle teksten. Vi kan gjøre teksten vår fet ved å bruke CSS “Font-Weight” -egenskap og sette den “fet”. Vi kan også sette noen numeriske verdier eller "dristigere" nøkkelord for denne egenskapen. I denne "fontvekt" -egenskapen vil vi angi hvor tykk teksten vil gjengi på utgangsskjermen. Vi kan også fet teksten vår i HTML ved å bruke forskjellige tagger. Men her vil vi diskutere CSS -egenskapen som brukes til å bruke den dristige effekten på teksten. Vi vil utforske denne dristige teksten i detalj i denne opplæringen. Vi vil også gjøre noen koder der vi fet teksten ved å sette numeriske verdier i eiendommen så vel som ved å bruke nøkkelord.

Eksempel nr. 1:

Vi trenger noen få elementer for å bruke egenskapen "Font-Weight". Som et resultat begynner vi med å lage noen HTML -elementer. Vi må først åpne en ny fil for å opprette en HTML -fil ved å velge HTML som språk. Programvaren vi bruker i denne opplæringen er Visual Studio Code. I denne filen begynner vi å skrive kode. I tillegg kommer vi inn "!”Og trykk deretter“ Enter ”for å anskaffe de grunnleggende HTML -kodene, som er nødvendige for alle HTML -koder.

Etter alt dette, må vi lage kroppen der vi legger til noen avsnitt under overskriften. Vi gir hvert avsnitt et unikt navn slik at vi kan bruke det når vi bruker "Font-Weight" -attributtet til disse avsnittene. Vi har tre avsnitt her. Nå vil vi bruke egenskapen "Font-Weight" på disse avsnittene i CSS-koden. Vi må koble begge filene, HTML og CSS -filen inne i hodet ved å bruke "lenke" -koden.

Først la vi navnet på avsnittet “P.P1 ”og bruker deretter egenskapen“ Font-Weight ”. Denne egenskapen brukes til å sette teksttykkelsen. Her setter vi den til "normal" som også er en standardverdi. "Font-size" for dette første avsnittet er "20px". Etter dette har vi et andre avsnitt som heter “P2” og setter sin “Font-Weight” til “Fet”. Dette "dristige" nøkkelordet brukes til å gjøre avsnittets tekst tykkere enn den enkle teksten og setter også størrelsen til "20px". Nå, for "P3", bruker vi igjen egenskapen "Font-Weight". Denne gangen setter vi den numeriske verdien for å sette tykkelsen på tredje ledd og gjøre den "fet". Her bruker vi "900" -verdien for denne "fontvekt" -egenskapen. Så, teksten til avsnittet vil vises "dristig" og også "fontstørrelse" er den samme som ovennevnte avsnitt.

Her er utdataene nedenfor, vi har tre avsnitt i utdataene og første ledd er enkelt fordi vi setter verdien som normal. Andre avsnitt er tykkere enn det første, noe som betyr at dette avsnittet er "fet". Det siste avsnittet er også "fet", men for tredje ledd setter vi den numeriske verdien i egenskapen "Font-Weight".

Eksempel 2:

Her har vi syv forskjellige avsnitt med unike navn, slik at vi bruker disse navnene i CSS-koden for å bruke egenskapen "Font-Weight" på dem. Vi vil sette en numerisk verdi for denne egenskapen så vel som nøkkelord.

Vi bruker "farge" for overskriften som "maroon" og setter "fontstørrelse" for alle "kropp" til "22px". For "par1" setter vi "fontvekt" til "normal" og "rød" som "fargen" på denne "par1". For “Par2” setter vi “Font-Weight” -verdien som “600” og “Green” -fargen er her for “Par2”. "Font-Weight" -verdien for "Par3" er satt til "700" og fargen "blå" brukes her. Nå bruker vi igjen egenskapen "Font-Weight" for neste avsnitt "PAR4" og setter den til "800" og dens "farge" er "oransje". “Par5” “Font-Weight” er satt som “900” og “Fargen” for “PAR5” er “Purple”. Etter dette setter vi nøkkelordet "fet" for "fontvekt" -verdien for "par6" og definerer også dens "farge" til "rosa". Nå har vi siste avsnitt “par7” og setter det til "dristigere" nøkkelordet. "Fargen" på "par7" er "magenta".

Du kan se flere avsnitt med forskjellige verdier av egenskapen "Font-Weight". Første ledd virker normalt når vi setter verdien som "normal". De resterende avsnittene virker "dristige" fordi vi setter tykkelsen på disse avsnittene i CSS-koden ved å bruke egenskapen "Font-Weight".

Eksempel nr. 3:

Vi har to avsnitt i denne koden og vil bruke egenskapen "Font-Weight" på ett avsnitt og vil vise deg forskjellen mellom den dristige teksten og den enkle teksten.

Først skal vi style kroppen ved å bruke to egenskaper. Egenskapen "Font-size" setter størrelsen på teksten til "20px" og justerer deretter alle kroppselementene til "sentrum" ved hjelp av egenskapen "tekst-align". Vi styler også overskriften for å gjøre det mer tiltalende ved å bruke "maroon" for "fargen" av "H1". Vi har satt "algerian" som "font-family" og "understrek" "H1" ved hjelp av "tekstdekorasjon" -egenskapen ". For "H2" setter vi den "grønne" fargen og "font-family" er "Times New Roman". Nå skal vi bruke egenskapen "Font-Weight" for begge avsnitt. For “para1” er verdien satt som “normal”. Men for "para2" bruker vi ganske enkelt nøkkelordet som verdien og setter det til "fet" for å gjøre teksten tykk.

Du kan enkelt merke forskjellen mellom begge avsnitt. Første avsnitt er det normale avsnittet, men andre ledd her er "fet". Fontstørrelsen på begge avsnitt er den samme, men du kan se at andre ledd virker dristig.

Eksempel 4:

Vi har to forskjellige overskrifter og fire forskjellige divklasser med forskjellige navn for hver div. Vi kommer til å bruke egenskapen "Font-Weight" for disse divene.

Først vil vi bruke disse to parametrene for å style kroppen. Attributtet "Font-size" justerer tekstens størrelse til "21px". Den "tekstjusterte" eiendommen "senter" alle kroppskomponentene mens vi setter den. "Font-Family" for alle kroppselementer er "Times New Roman". Vi bruker "lilla" som "fargen" på "H1", definerer "font-family" til "algerisk" og vi styler i tillegg overskriften ved å sette "tekstdekorasjon" -attributtet til "understrek" "H1". Vi valgte fargen "oransje" for "H2" og "calibri" som fontfamilien. Vi bruker ingen eiendommer for “Div1” og “Div2”, vi setter en "900" numerisk verdi for "Font-Weight" -verdien. Vi har “Div3” og “Bold” brukt til “Font-Weight” og “Div4”, “Font-Weight” er satt som “Bolder”.

Det første "Div1" -avsnittet er enkelt, og vi satte ikke noen "fontvekt" -verdi for denne DIV1, så standardverdien er satt her for "Div1". For de andre divene setter vi verdien av "fontvekt" -verdien og lager teksten til disse divene "dristige" eller "tykk". Vi nevner også "fontvekt" for alle div i utgangen. DIV2 vises med fontvektverdi “900”, den neste DIV3 vises her som en "dristig" verdi for "Font-Weight" -egenskapen, og "Bolder" for siste DIV3.

Konklusjon

Du har lært hvordan du bruker CSS “Font-Weight” -egenskaper gjennom denne opplæringen. I denne opplæringen har vi undersøkt CSS “Font-Weight” -egenskapen og har forklart hva den gjør, hvorfor vi bruker den, hvordan du bruker den og hvilke resultater den gir. Egenskapen "Font-Weight" er allerede dekket i denne opplæringen. Vi har brukt denne "fontvekt" -egenskapen for å sette vekt på skriften til tykkere eller fet skrift. Sammen med resultatene av hvert eksempel i denne opplæringen, har vi også gitt koder for hvordan du bruker egenskapen "Font-Weight". Jeg tror du vil ha en solid forståelse av CSS “Font-Weight” -egenskaper etter å ha lest denne opplæringen nøye.