Hvordan man bedst bruger skrifttyper i CSS?

Denne artikel vil introducere dig til et simpelt, men alligevel vigtigt emne, der er Fonts In og vil også give dig en praktisk demonstration om emnet. Følgende punkter vil blive dækket i denne artikel,

• Skrifttyper i CSS
• Attributter i CSS-skrifttype
• attribut for skrifttypestil
• attribut for skriftvægt
• attribut for skriftstørrelse
• attribut for font-familie

Websteder bærer indhold i form af billeder, lyd, video og tekstindhold. Imidlertid er de fleste websider stadig afhængige af tekst som det dominerende format. Dette skyldes, at almindelig tekst giver nogle meget væsentlige fordele.

Ikke-påtrængende læsbarhed - Du vil kontrollere den seneste kampscore, mens du er på kontoret. Selvfølgelig vil du have en hurtig tekstopdatering, ikke en støjende video!
Krav til lav netværksbåndbredde - Tekstindhold kan indlæses selv i dårlige internetforbindelsesområder, mens rich media ikke kan.
Søgevenlig - Websteder holder altid øje med, hvor let deres indhold bliver bemærket i søgemaskinerne. Tekst er bedst egnet til dette, i det mindste indtil AI fuldstændigt overtager internettet!

Mens formatering af tekstindhold har webdesignere kun få parametre at arbejde på - skrifttype, justering, fremhævning og farve. At vælge den rigtige skrifttype til din tekst er et kritisk valg. Standardpraksis er at bruge CSS-font-tags til at definere skrifttyper til tekst på HTML-sider.
Hvis du er ny i HTML-programmeringens verden, kan du få en grundlæggende startertur her. Det kan være en god idé at læse om CSS-basics, inden du går videre med at lære om CSS-skrifttyper.

For en omfattende CSS-tutorial, besøg Edureka CSS Tutorial For Beginners. Du får en fremragende heads-up på den måde, CSS skal bruges til at udvide HTML-webdesign.

Fortsætter med denne artikel om skrifttyper i CSS

Skrifttyper i CSS

En skrifttype er grundlæggende et sæt egenskaber, der er knyttet til visning af tekst. Skrifttyper adskiller sig fra hinanden efter størrelse, indrykning, bredde, skråning og så videre. Lad os begynde med en grundlæggende tekstvisning i forskellige skrifttyper.

Eksempel 1: Overskrifter og afsnit i forskellige skrifttyper

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Afsnittet med kursiv fed Georgia-skrifttype
 

 Eksempel 1: Output 

I eksempel 1 har vi 3 forskellige tekstlinjer i forskellige skrifttyper. Du vil bemærke, at hver af skrifttyperne varierer i deres tegnbredde, fordybninger osv.

Fortsætter med denne artikel om skrifttyper i CSS

Attributter i CSS-skrifttype

CSS-skrifttyper har 4 primære attributter - stil, vægt, størrelse og familie. Stilattributten angiver normal eller kursiv. Vægten viser skrifttypen som almindelig eller fed. Vægt kan også udtrykkes numerisk. Størrelsen er simpelthen skriftstørrelsen større, større tekst i udseende. Der er flere måder, hvorpå skriftstørrelse kan tildeles, detaljerede beskrivelser gives i senere afsnit. Familieattributten er at tildele skrifttypenavnet til teksten.

I eksempel 1 har vi brugt forskellige skrifttypenavne til overskrifter og afsnit. Under h1- og p-tags ser vi to skrifttypenavne, mens h2-tag kun navngiver en skrifttype. Dette er definitionen af ​​en fontfamilie, mere om dette senere.

Fortsætter med denne artikel om skrifttyper i CSS

attribut for skrifttypestil:

De to primære stilarter, der kan indstilles, er 'normale' og 'kursive'. Kursiv formodes at være kursiv i naturen med en skråstilling. Normal er standardindstillingen, som er lige. Der er en anden mindre brugt mulighed kaldet 'skrå', der ligner den kursive mulighed i de fleste skrifttyper. Du kan også indstille stilen til at 'arve', så den tager skrifttypestilen fra dens overordnede element.

Fortsætter med denne artikel om skrifttyper i CSS

attribut for fontvægt:

Denne attribut afgør, om skrifttypen skal vises tyk eller tynd. Det kan indstilles til 'normal' eller 'fed'. Standardværdien er normal. Denne værdi kan også indstilles som numerisk. Vægt på 400 repræsenterer normal og 700 er for fed. Der er få andre indstillinger (der spænder fra 100 - meget let til 900 - meget fed), men de understøttes ikke af alle skrifttyper. Alle vægtindstillinger er vist i eksempel 3.

Fortsætter med denne artikel om skrifttyper i CSS

attribut for skriftstørrelse:

Størrelsesattributten kan indstilles på flere måder. Lad os liste ned på disse måder nedenfor.
● Tællet værdi såsom 'medium', 'large'. Faktisk ligesom størrelser på tøj kan værdierne variere fra XX Small til XX Large!
● Indstil i forhold til dets overordnede element som 'større' eller 'mindre'.
● Procentdel af det overordnede elements størrelse.
● Indstil som 'arve' for direkte at vedtage størrelsen på det overordnede element.
● Som absolut værdi i enhederne px (pixels), pt (point) eller cm (centimeter)
'Medium' er standardværdien, der er indstillet til denne parameter.

Fortsætter med denne artikel om skrifttyper i CSS

attribut for font-familie:

I HTML er CSS-skrifttypefamilien til indstilling af skrifttypenavn. Du kan enten bare sætte et enkelt skrifttypenavn med tagget. Eller du kan tildele flere værdier som en liste med skrifttypefamilier, der definerer den prioritet, browseren skal vælge skrifttypen i.
Listen prioriteres fra venstre mod højre i form af et tilbageslagssystem. Den første værdi, hvis tilgængelig, vælges, eller kontrol går til den næste, indtil slutningen af ​​listen nås. Standardfontfamilien er defineret af browserindstillingerne.
CSS-skrifttypefamilier er af to typer - generiske familier og fontfamilier.
● Generiske familier - baseret på nogle generelle egenskaber er skrifttyper grupperet som 'serif', 'sans serif', 'monospace' osv. Sans serif betyder for eksempel skrifttyper uden serif-stil.
● Familienavne - skrifttyper, der hører til bestemte familiehierarkier. Times, Arial, Courier er alle skrifttypefamilier, og Times New Roman er en eksempelskrifttype af Times-familien.
De forskellige muligheder for brug af skrifttypefamilier er anført i eksempel 4 nedenfor.

Nogle almindelige punkter at bemærke

● Ligesom flere andre CSS-egenskaber varierer nogle af fontindstillingerne i forskellige browsere. Se efter browsersupport, inden du bruger nogle sjældne skrifttypeindstillinger.
● Du kan indstille skrifttypeindstillinger separat ved hjælp af de individuelle tags i skrifttypestil, fontvægt osv. Alternativt, hvis du foretrækker kompakt kode, kan du bruge attributten stenografi med alle værdier i samme linje.
● I brugerscenarier, hvor skrifttypen skal variere i størrelse afhængigt af browserstørrelsen, er der en nyttig indstilling for skriftstørrelse kaldet responsiv skrifttypeindstilling. Det kan indstilles med en vw-enhed, hvilket betyder 'visningsportbredde'. På den måde følger tekststørrelsen størrelsen på browservinduet.

Håber du fandt de oplysninger, du ledte efter, om skrifttyper i CSS. Del din oplevelse med os i kommentarfeltet nedenfor. Glad design!

Hvis du er interesseret i at lære mere om webudvikling, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).