CSS -skrifter

Fonter er de mest betydningsfulle komponentene vi ser på ethvert nettsted, så mens du bygger et nettsted, er det veldig viktig å velge riktig/passende skrift. Fonter forbedrer det visuelle utseendet til ethvert nettsted og bruk av passende skrift hjelper til med å øke lesbarheten og effektiviteten til ethvert nettsted.

Generiske fontfamilier i CSS

Det er fem typer fontfamilier i CSS I.e. Serif, sans-serif, monospace, fantasy og cursive. Alle disse skriftfamiliene brukes til å spesifisere utseendet/formen på skriftene:

1. Serif -skrifter har små stilige slag i utkanten av bokstavene
2. Sans serif Fonter har vanlige bokstaver, ingen hjerneslag. Disse skriftene er lett lesbare.
3. Monospace Fonter er fast, fast bredde bokstaver. Mest brukt til å representere programmeringskoden
4. Kursiv Fonter ligner veldig på menneskelig skriving
5. Fantasi Fonter har dekorativt/fancy utseende

Visuell forskjell på generiske fontfamilier

Følgende utdrag vil gi en retningslinje for å forstå formens forskjell på generiske fontfamilier

Ulike typer generiske fontfamilier

Den undergitte figuren presenterer de forskjellige typene av hver generiske fontfamilie:

CSS fontegenskaper

I CSS kan tekstens utseende endres på flere måter som å velge skriftstil, fontfamilie, fontfarge, skriftstørrelse, etc. Ettersom riktig bruk av font har stor innvirkning på teksten og leserens opplevelse, gir CSS mange fontegenskaper som kan brukes til å tilpasse utseendet til skrifter. Denne oppskrivningen vil målrette seg mot følgende fontegenskaper:

• Font-familie
• fontstil
• Font-variant
• skriftstørrelse
• Fontvekt
• Font korthånd

La oss starte med fontfamilien.

CSS fontfamilie

Denne egenskapen brukes til å spesifisere fontfamilien for ethvert HTML -element E.g. “Arial”, “Times New Roman”, etc. Eller vi kan bruke en generisk fontfamilie e.g. Serif, kursiv osv.

Eksempel

Det undergitte eksemplet bruker serif-skriftene for

element og kursive skrifter for

elementer:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

H3
Font-Family: 'Times New Roman', Times, Serif;

P
Font-family: Cursive;

Ovennevnte kode viser følgende utgang:

CSS Font-stil

For å definere en viss spesifikk stil for et HTML-element brukes Font-stilegenskapen. Font-stilegenskapen kan ha en normal, skrå eller kursiv verdi.

Eksempel

I kodestykket nedenfor, skriftstilen til

Elementet endres til kursiv stil:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

H3
Font-stil: kursiv;

Ovennevnte utdrag viser følgende resultat:

De skrå, normale verdiene kan brukes til eiendomsegenskapen, den skrå verdien vil gi resultater som er veldig lik den kursiske stilen.

CSS Font-Variant

Det kan ta en verdi "småkapsler" som konverterer TLE-bokstaver til små store bokstaver (store bokstaver, men mindre i størrelse).

Eksempel

Den undergitte koden vil demonstrere effekten av font-variant egenskap på

element:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

P
Font-Variant: Small-Caps;

Ovennevnte kode vil gi følgende resultat:

CSS fontstørrelse

Font-størrelse egenskapen er susset for å sette størrelsen på teksten og verdien for skriftstørrelse kan spesifiseres som enten liten, stor, middels osv., eller i form av PX, EM, %, etc.

Den undergitte koden spesifiserer fontstørrelsen for

element som ekstra stort:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

P
Font-størrelse: X-Large;

Ovennevnte utdrag genererer følgende resultat:

Utgangen verifiserer at teksten til

Elementene er større enn normal skriftstørrelse.

CSS fontvekt

Fontvektegenskapen brukes til å stille inn fontvekten når det gjelder noen spesifikke verdier som dristige, normale, lettere osv. Det kan bestemme vekten i form av en numerisk verdi som 100, 200, 300 osv. Den større verdien spesifiserer en dristigere/tykkere skrift mens den mindre verdien representerer tynnere skrift.

Følgende kodestykke setter fontvekt for

element som bruker "dristigere" verdi:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

P
Fontvekt: Bolder;

Ovennevnte utdrag produserer følgende utgang:

Font Shorthand -eiendom i CSS

CSS gir en kortvarig eiendom for alle ovennevnte egenskaper. Bruker korthånd “Font” Eiendom vi kan sette skriftstil, familie, variant osv. i en enkelt linje.

Det undergitte eksemplet viser hvordan du bruker Font Shorthand-eiendom i CSS:

Html

CSS -skrifter

Første avsnitt

Andre avsnitt

CSS

P
Font: fet 30px kursiv;

Ovennevnte utdrag spesifiserer fontvekt, fontstørrelse og font-familie i en erklæring ved bruk av font shorthand-egenskap:

Ovennevnte utgang verifiserer at Shorthand -egenskapen setter fontvekten, størrelsen og familien for

element.

Konklusjon

Fontfamiliene bestemmer formen på skrifter, mens fontstil, fontvekt, fontstørrelse og font-variant egenskaper bestemmer henholdsvis stil, vekt, størrelse og småkap. Alle disse funksjonalitetene kan utføres på skriftene i en enkelt erklæring ved bruk av "font" -egenskaper ".

Denne oppskrivningen presenterer en omfattende oversikt over hva som er CSS-skrifter, generiske fontfamilier og hvordan du setter fontens stil.