Hvordan du best kan bruke skrifter i CSS?

Denne artikkelen vil introdusere deg for et enkelt, men likevel et viktig emne som er Fonts In og vil også gi deg en praktisk demonstrasjon om emnet. Følgende tips vil bli dekket i denne artikkelen,

hvordan du bruker skanner i java

• Skrifter i CSS
• Attributter i CSS Font
• font-stil attributt
• skriftvektattributt
• attributt for skriftstørrelse
• font-family attributt

Nettsteder har innhold i form av bilder, lyd, video og tekstlig innhold. Imidlertid er de fleste nettsider fortsatt avhengige av tekst som det dominerende formatet. Dette er fordi ren tekst gir noen veldig viktige fordeler.

Ikke-påtrengende lesbarhet - Du vil sjekke den siste kampresultatet mens du er på kontoret. Åpenbart vil du ha en rask tekstoppdatering, ikke en støyende video!
Krav til lav båndbredde på nettverket - Tekstinnhold kan lastes inn selv i dårlige internettforbindelsesområder, mens rich media ikke kan.
Søkevennlig - Nettsteder holder alltid et øye med hvor lett innholdet deres blir lagt merke til i søkemotorer. Tekst er best egnet til dette, i hvert fall til AI overtar internett helt!

Mens formatering av tekstinnhold har webdesignere bare få parametere å jobbe med - font, justering, utheving og farge. Å velge riktig skrift for teksten din er et kritisk valg. Standard praksis er å bruke CSS font tags for å definere skrifter for tekst på HTML-sider.
Hvis du er ny i verden av HTML-programmering, kan du få en grunnleggende starttur her. Det kan være lurt å lese om CSS-grunnleggende før du begynner å lære om CSS-skrifter.

For en omfattende CSS-veiledning, besøk Edureka CSS Tutorial For Beginners. Du får en utmerket heads-up på måten CSS skal brukes til å utvide HTML-webdesign.

Fortsetter med denne artikkelen om skrifttyper i CSS

Skrifter i CSS

En skrift er i utgangspunktet et sett med egenskaper knyttet til visning av tekst. Fontene er differensiert fra hverandre etter størrelse, fordypning, bredde, skråstilling og så videre. La oss begynne med en grunnleggende tekstvisning i forskjellige skrifttyper.

Eksempel 1: Overskrifter og avsnitt i forskjellige skrifttyper

kropp {bakgrunnsfarge: lyseblå} h1 {font: fet 30px arial, sans-serif} h2 {font: 15px verdana} p {font: kursiv fet 12px / 30px Georgia, serif}
Avsnittet med kursiv fet Georgia-skrift
 

 Eksempel 1: Utgang 

I eksempel 1 har vi 3 forskjellige tekstlinjer i forskjellige skrifttyper. Du vil merke at hver av skriftene varierer i karakterbredde, innrykk osv.

Fortsetter med denne artikkelen om skrifttyper i CSS

Attributter i CSS Font

CSS-skrifter har fire primære attributter - stil, vekt, størrelse og familie. Stilattributtet betegner normal eller kursiv. Vekten viser skriften som ren eller fet. Vekt kan også uttrykkes numerisk. Størrelsen er ganske enkelt skriftstørrelsen større, større tekst i utseende. Det er flere måter skriftstørrelsen kan tildeles på, detaljerte beskrivelser er gitt i senere seksjoner. Familieattributtet er å tildele skriftnavnet til teksten.

I eksempel 1 har vi brukt forskjellige skriftnavn for overskriftene og avsnittet. Under h1- og p-kodene ser vi to skriftnavn oppført, mens h2-taggen bare navngir en skrift. Dette er definisjonen av en fontfamilie, mer om dette senere.

Fortsetter med denne artikkelen om skrifttyper i CSS

font-style attributt:

De to primære stilene som kan angis, er 'normal' og 'kursiv'. Kursiv er ment å være kursiv i naturen med en skråstilling. Normal er standardalternativet som er rett. Det er et annet mindre brukt alternativ kalt 'skrå', som ligner det kursive alternativet i de fleste skrifttyper. Du kan også sette stilen til å 'arve' slik at den tar skriftstilen fra det overordnede elementet.

Fortsetter med denne artikkelen om skrifttyper i CSS

font-weight attribute:

Denne attributtet bestemmer om skriften skal være tykk eller tynn. Den kan settes til 'normal' eller 'fet'. Standardverdien er normal. Denne verdien kan også angis som numerisk. Vekten på 400 representerer normal og 700 er for fet skrift. Det er få andre innstillinger (alt fra 100 - veldig lett til 900 - veldig fet), men de støttes ikke av alle skriftene. Alle vektalternativene er vist i eksempel 3.

Fortsetter med denne artikkelen om skrifttyper i CSS

attributt for skriftstørrelse:

Størrelsesattributtet kan angis på flere måter. La oss liste opp disse måtene nedenfor.
● Oppregnet verdi som ‘middels’, ‘stor’. Faktisk akkurat som størrelser på klær, kan verdiene variere fra XX Small til XX Large!
● Sett i forhold til det overordnede elementet, som 'større' eller 'mindre'.
● Prosent av størrelsen på det overordnede elementet.
● Angi som 'arv' for direkte å vedta størrelsen på det overordnede elementet.
● Som absolutt verdi i enhetene px (piksler), pt (poeng) eller cm (centimeter)
‘Medium’ er standardverdien som er angitt for denne parameteren.

Fortsetter med denne artikkelen om skrifttyper i CSS

font-family attributt:

I HTML er CSS-skriftfamilien for å angi skriftnavnet. Du kan enten bare sette et enkelt skriftnavn med koden. Eller du kan tilordne flere verdier som en skriftfamilieliste som definerer hvilken prioritet nettleseren skal velge skrift i.
Listen prioriteres fra venstre til høyre, i form av et tilbakeslagssystem. Den første verdien hvis tilgjengelig er valgt, eller kontroll går til den neste, til slutten av listen er nådd. Standardfamilien er definert av nettleserinnstillingene.
CSS fontfamilier er av to typer - generiske familier og fontfamilier.
● Generiske familier - basert på noen generelle egenskaper, er skriftene gruppert som 'serif', 'sans serif', 'monospace' osv. For eksempel betyr Sans serif skrifter uten serif-stil.
● Familienavn - skrifter som tilhører bestemte familiehierarkier. Times, Arial, Courier er alle fontfamilier, og Times New Roman er en eksempler på fonten til Times-familien.
De forskjellige bruksalternativene for fontfamilier er oppført i eksempel 4 nedenfor.

Noen vanlige punkter å merke seg

● I likhet med flere andre CSS-egenskaper, varierer noen av skriftinnstillingene i forskjellige nettlesere. Se etter nettleserstøtte før du bruker noen sjeldne skriftinnstillinger.
● Du kan angi skriftinnstillinger separat ved å bruke de individuelle kodene i skriftstil, skriftvekt osv. Alternativt, hvis du foretrekker kompakt kode, kan du bruke kortattributtattributtet med alle verdier på samme linje.
● I brukerscenarier der du vil at skriften skal variere i størrelse avhengig av nettleserstørrelsen, er det en nyttig innstilling for skriftstørrelse som kalles responsiv skriftinnstilling. Den kan stilles inn med en vw-enhet, som betyr 'visningsportbredde'. På den måten vil tekststørrelsen følge størrelsen på nettleservinduet.

Håper du fant informasjonen du lette etter på Fonts In CSS. Del din erfaring med oss ​​i kommentarfeltet nedenfor. Glad design!

Hvis du er interessert i å lære mer om nettutvikling, kan du sjekke ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).