Sådan kursiverer du tekst i CSS: En komplet udviklerguide

Hurtigt svar: For at kursivere tekst i CSS skal du bruge egenskaben font-style: italic; på en hvilken som helst selektor. Brug

Kursiv er en af ​​de små designbeslutninger, der stille og roligt udfører en masse tungt arbejde. De leder læserens opmærksomhed, tilføjer rytme til din tekst og skaber visuelt hierarki uden at skulle bruge en ekstra linje kode.

Hvis du er ved at bygge en hjemmeside og vil vide, hvordan du kursiverer tekst i CSS korrekt, herunder hvornår du skal bruge hvilken metode, og hvorfor det er vigtigt for både design og tilgængelighed, er du kommet til det rette sted.

I denne guide gennemgår vi alt fra det grundlæggende om font-style-egenskaben til avancerede teknikker som responsiv kursiv, overvejelser om skrifttypefamilier og almindelige udviklerfejl, du skal undgå.

TL;DR: Alt du behøver at vide om kursivering af tekst i CSS

• Brug font-style: italic; til al CSS-baseret kursiv. Det er standardegenskaben og fungerer på tværs af alle moderne browsere uden nogen løsninger.

• Eksterne stylesheets er altid den bedste fremgangsmåde. Skriv dine kursive styles i en separat .css-fil i stedet for inline eller i HTML-headset. Det holder din kode ren og let at vedligeholde, efterhånden som dit websted vokser.

• Em-tagget og i-tagget er ikke det samme. Tagget

• Ikke alle skrifttyper har en ægte kursiv version. Hvis din valgte skrifttype ikke har en kursiv variant, vil browseren syntetisere en ved mekanisk at hælde teksten, og resultatet ser normalt groft ud. Indlæs altid den kursive tykkelse fra din skrifttypeudbyder.

• Skrå og kursiv er forskellige værdier. Kursiv bruger skrifttypens designede skrå bogstavformer. Skrå hælder kunstigt den normale skrifttype. Når du har et valg, er kursiv den renere løsning.

• Overdreven brug af kursiv dræber deres effekt. Brug dem kun til korte sætninger, billedtekster, titler og nøgleord. Store blokke af kursiv brødtekst anstrenger øjnene og mister deres evne til at understrege noget som helst.

• Tilgængelighed må ikke være en eftertanke. Brug aldrig kursiv som det eneste signal for vigtige oplysninger. Kombiner dem med fed tekst, etiketter eller omgivende kontekst, så alle brugere, inklusive dem, der bruger skærmlæsere, fuldt ud kan forstå dit indhold.

Hvad gør kursivering af tekst egentlig i CSS?

Når du kursiverer tekst i CSS, beder du browseren om at gengive et ord, en sætning eller en tekstblok i en skrå stil. Men der er mere i spil end blot en visuel hældning.

Browsere skelner mellem to ting, når de støder på kursiv tekst:

• Visuel gengivelse: Teksten vises skråt på siden.

• Semantisk betydning: Afhængigt af det HTML-tag, du bruger, kan browseren og skærmlæserne behandle teksten som fremhævet indhold, hvilket påvirker, hvordan den læses højt, og hvordan søgemaskiner fortolker dens betydning.

Denne sondring er præcis grunden til, at det er så vigtigt at forstå CSS-font-style-egenskaben sammen med de rigtige HTML-tags. Lad os opdele det ordentligt.

Forklaring af CSS-fontstilegenskaben

Egenskaben font-style er det centrale CSS-værktøj til at kontrollere tekstens hældning. Den er ren, enkel og understøttes bredt på tværs af alle moderne browsere.

Hvad er font-style-egenskaben?

CSS-egenskaben font-style, som er en del af font-shorthanden, styrer, om tekst vises oprejst, kursiv eller skrå. Du anvender den på en hvilken som helst CSS-selektor, og den overlapper ned til underordnede elementer, medmindre den tilskrives.

Grundlæggende syntaks ser sådan ud:

selector { font-style: italic; }

De tre værdier for font-style

Egenskaben font-style accepterer følgende værdier:

Værdi	Hvad den gør	Eksempel
normal	Standardværdi. Viser tekst oprejst.	skrifttype: normal;
kursiv	Gengiver tekst i skrifttypens ægte kursive version, hvis tilgængelig.	skrifttype: kursiv;
skrå	Hælder kunstigt teksten. Nyttig, når en skrifttype ikke har en ægte kursiv variant.	skrifttype: skrå;

Forskellen mellem kursiv og skrå skrift er subtil, men værd at kende. Kursiv bruger skrifttypens faktiske kursive design, som ofte er en lidt anderledes bogstavform. Skrå skrift hælder blot den normale skrifttype mekanisk. Hvis du er i tvivl, så brug kursiv.

Tre måder at anvende kursiv på din webside

CSS giver dig tre metoder til at anvende font-style-egenskaben, og hver enkelt har sin plads afhængigt af dit projekts størrelse og struktur.

Indlejrede stilarter

Du skriver stilen direkte inde i HTML-elementet ved hjælp af style-attributten.

<p style="font-style: italic;">Denne tekst vil være kursiveret.</p>

Dette er hurtigt og nyttigt til engangsoverskrivninger eller hurtig prototyping. Det er dog ikke ideelt til store projekter, fordi det kombinerer din markup med din styling, hvilket gør fremtidige opdateringer sværere at administrere.

Interne stilark

Du placerer din CSS inde i en<style> block in the <head> of your HTML document.

<head> <style> p { font-style: italic; } </style> </head>

Denne tilgang fungerer godt til projekter med én side eller små websteder, hvor det giver mening at holde alt samlet i én fil. Det er renere end indlejrede stilarter, men det binder stadig dit design til en specifik HTML-fil.

Eksterne stylesheets (anbefales)

Du skriver din CSS i en separat .css-fil og linker den til dit HTML-dokument. Dette er den fremgangsmåde, vi anbefaler til enhver rigtig produktionshjemmeside.

<!-- In your HTML head --><link rel="stylesheet" href="styles.css" />/* I styles.css */ .highlight { font-style: italic; }

Eksterne stylesheets holder din kode organiseret, genanvendelig og nem at vedligeholde på tværs af flere sider. De indlæses også mere effektivt, når de er cachelagret af browseren, hvilket understøtter dit websteds ydeevne.

Bemærk: Inline-stilarter har den højeste specificitet, efterfulgt af interne stylesheets og derefter eksterne. Men for at sikre langsigtet vedligeholdelse og konsistens på tværs af dit websted, bør du altid bruge eksterne stylesheets som standard.

Hvordan målretter man kursivering af specifikke elementer?

Du ønsker sjældent at kursivere alle tekststykker på en side. CSS-selektorer giver dig mulighed for at anvende kursiv præcis der, hvor du vil have dem.

Elementvælgere

Målret alle forekomster af et specifikt HTML-element.

p { font-style: kursiv; }

Dette kursiverer hvert afsnit på siden. Brug dette sparsomt, da global anvendelse kan forringe læsbarheden.

Klassevælgere

Dette er den mest fleksible metode til at anvende kursiv på flere specifikke elementer.

.pullquote { font-style: italic; font-size: 1.1em; }

<p class="pullquote">Design handler ikke kun om, hvordan det ser ud. Det handler om, hvordan det fungerer.</p>

Klassevælgere er ideelle til at style komponenter som citater, billedtekster, ansvarsfraskrivelser eller ethvert gentagende element, der skal skille sig ud visuelt.

ID-vælgere

Målret mod et enkelt unikt element på siden.

#bogtitel { font-style: italic; }

Brug ID-selektorer sparsomt. De har meget høj specificitet, hvilket kan gøre det sværere at tilsidesætte din CSS senere, hvis dit design udvikler sig.

En hurtig bemærkning om CSS-specificitet

I rækkefølge fra højeste til laveste: ID-vælgere slår klassevælgere, og klassevælgere slår elementvælgere. Hvis din kursive stil ikke gælder, tilsidesætter en mere specifik regel et andet sted i din CSS den sandsynligvis.

Em-tagget vs. i-tagget: Semantisk vs. stilistisk vægtning

Dette er et af de mest misforståede områder inden for HTML- og CSS-tekststyling. Begge tags gengiver tekst som standard i kursiv, men de har meget forskellige betydninger.

em-tagget og semantisk vægtning

Tagget HTML- element, der fortæller browsere, skærmlæsere og søgemaskiner, at den ombrudte tekst har betoning. Tænk på det som den skriftlige ækvivalent til at hæve stemmen over et specifikt ord.

<p>Du bør <em>aldrig</em> springe tilgængelighedstest over.</p>

Skærmlæsere vil ændre deres tone eller bøjning, når de støder på et <em>tag.</em>.

Dette er afgørende for brugere med synshandicap, fordi det bevarer den tilsigtede betydning af sætningen. Søgemaskiner genkender også on-page SEO på en subtil måde.

i-tagget og visuel styling

<i>Tagget, eller i-elementet, er et rent stilistisk tag. Det gengiver tekst i kursiv uden at antyde nogen ekstra vigtighed eller semantisk betydning. HTML-specifikationen definerer faktisk passende anvendelser af <i>tagget, som inkluderer:</i></i>

• Tekniske eller videnskabelige termer

• Fremmedord eller -sætninger

• Skibsnavne (en mangeårig typografisk konvention)

• Værktitler i løbende tekst

• Alternativ stemme eller tanke i kreativ skrivning

<p>Skibet <i>HMS Endeavour</i> satte sejl i 1768.</p>

Bedste praksis: Bruges

Kombination af kursiv med andre CSS-tekststile

Kursiv fungerer sjældent alene. Kombination med andre CSS-egenskaber tilføjer lag af fremhævelse og hjælper vigtig tekst med at fremstå endnu tydeligere.

Kursiv og fed sammen

Ved at kombinere kursiv tekst med fed skrift skabes der en stærk visuel fremhævelse, der er svær at overse.

stærk em { font-style: italic; font-weight: fed; }

<p>Læs venligst <strong><em>vilkårene og betingelserne</em></strong> omhyggeligt.</p>

Brug denne kombination til kritiske meddelelser, advarsler eller enhver anden form for fed skrift, der virkelig skal få læseren til at stoppe op.

Kursiv og tekstdekoration

Du kan kombinere font-style: italic; med text-decoration: underline; for at skelne kursiverede links fra den omgivende kursiverede tekst. Dette er nyttigt, når din brødtekst allerede er kursiveret, og du har brug for, at links forbliver visuelt adskilte.

.italic-link { font-style: italic; text-decoration: understregning; color: #f05a28; }

Undgå overdreven tekstdekoration. Hvis der kombineres for mange stilarter, kan resultatet se rodet ud og faktisk distrahere læseren i stedet for at dirigere den.

Skriftfamilier og hvordan de påvirker kursiv gengivelse?

Ikke alle skrifttyper håndterer kursiv på samme måde. Dette er noget, mange udviklere overser, og det kan stille og roligt ødelægge dit design.

Når du indstiller font-style: italic;, søger browseren efter en ægte kursiv version af den skrifttype, du bruger. Hvis den kursive version findes i skrifttypefamilien, indlæses den.

Hvis den ikke findes, syntetiserer browseren en skrå hældning ved mekanisk at vippe den normale skrifttype. Syntetiseret kursiv ser ofte akavet ud, især i større størrelser.

Her er hvad du skal holde øje med:

• Serif-skrifttyper som Georgia eller Playfair Display har ofte et flot og karakteristisk kursivt design. De er et sikkert valg til brødtekst, der ofte vil blive kursiveret.

• Sans-serif-skrifttyper som Open Sans eller Lato har typisk renere, enklere kursive varianter, der fungerer godt i brugergrænsefladesammenhænge.

• Variable skrifttyper giver endnu mere kontrol. Med variable skrifttyper kan du finjustere graden af ​​hældning ved hjælp af font-style: oblique 15deg;, hvilket giver dig præcis kontrol over, hvor skrå eller kursiv teksten vises.

Når du bruger Google Fonts, skal du altid vælge kursiv tykkelse udover din normale tykkelse.

Hvis du kun indlæser den almindelige variant, vil browseren syntetisere kursiv, og resultatet vil se markant anderledes ud sammenlignet med skrifttypens ægte kursive design.

Responsiv kursiv: Styling af tekst, der ser godt ud på alle enheder

Kursiv tekst kan opføre sig anderledes på små skærme. Visse skrifttyper gengiver deres kursivvarianter i mindre størrelser, hvilket resulterer i reduceret læsbarhed, især på skærme med lav opløsning.

Brug medieforespørgsler til at justere skriftstørrelsen for kursiverede passager på mobilen:

@media (maks. bredde: 768px) { .pullquote { font-size: 1em; /* Lidt større for læsbarhed på små skærme */ linjehøjde: 1.9; } }

Et par andre ting at huske på ved responsiv kursiv tekst:

• Øg linjehøjden en smule for blokke med kursiv brødtekst. Kursiv optager naturligt lidt mere vandret plads ved bestemte størrelser, og strammere linjehøjder kan gøre dem sværere at læse.

• Test dine kursive stilarter på faktiske enheder, ikke kun på browservinduer med ændret størrelse. Der kan være betydelige gengivelsesforskelle mellem iOS Safari, Android Chrome og desktopbrowsere.

• Undgå at bruge store blokke af kursiv tekst som primær brødtekst på mobilen. Reserver kursiv til korte sætninger, billedtekster og fremhævelser.

Tilgængelighedsovervejelser ved brug af kursiv tekst

Godt webdesign betyder at designe for alle. Her er hvordan kursiv tekst interagerer med tilgængelighed.

Hvordan håndterer skærmlæsere kursiv?

Skærmlæsere reagerer på semantisk HTML, ikke visuel styling. Derfor er forskellen mellem <em>og <i>så vigtig i praksis.</i></em>.

• Tekst i <em>tags udløser en ændring i stemmebøjningen på de fleste skærmlæsere, hvilket bevarer betoningen for lytteren.</em>.

• Tekst i <i>tags læses i samme tone som den omgivende tekst, da den ikke har nogen semantisk vægt.</i>.

• Tekst, der er formateret i kursiv udelukkende via CSS, uden et semantisk tag, behandles som almindelig tekst af skærmlæsere.

Gør kursiv tekst inkluderende

Et par praktiske tips til at sikre, at din brug af kursiv ikke skaber barrierer:

• Stol aldrig udelukkende på kursiv til at formidle vigtig betydning. Kombiner det altid med et andet tegn, såsom fed tekst, en etiket eller den omgivende kontekst.

• Oprethold tilstrækkelig farvekontrast, selv når teksten er kursiveret. Hældningen af ​​kursive bogstaver kan reducere den opfattede kontrast en smule.

Undgå at bruge store blokke med kursiv tekst til vigtige instruktioner eller advarsler. Store blokke med kursiv tekst er sværere at læse for brugere med ordblindhed.

Kør dine sider gennem tilgængelighedstestværktøjer som WAVE eller Axe inden publicering for at opdage eventuelle problemer med fremhævelsesmarkup.

Almindelige fejl udviklere begår, når de kursiverer tekst i CSS

Selv erfarne udviklere støder på disse. Her er de hyppigste fejl relateret til kursiv, og hvordan man retter dem.

• Brug af i-tagget til semantisk fremhævelse. Hvis du vil udtrykke, at et ord har ekstra betydning i en sætning, skal du bruge

• Kursivering af hele afsnit. Store blokke af kursiv tekst er virkelig sværere at læse. Kursiv mister sin effekt, når den bruges for meget, og kan føles som visuel støj i stedet for meningsfuld fremhævelse.

• Glemmer at indlæse den kursive skrifttypevariant. Hvis du indlæser en Google-skrifttype uden at inkludere den kursive tykkelse, syntetiserer browseren en skrå version, der normalt ser dårlig ud. Indlæs altid de specifikke kursive tykkelser, du har brug for.

• Ignorerer mobilgengivelse. Kursiv tekst kan virke mærkbart mindre eller sværere at læse på visse mobilenheder. Test altid på tværs af rigtige enheder og ikke kun forhåndsvisninger på computere.

• Afhængig af standardbrowserstile. Ikke alle skrifttyper har en standardværdi for kursiv gengivelse, der ser ud, som du forventer. Definer altid skrifttypestil eksplicit i din CSS i stedet for at antage, at browseren håndterer det ensartet på tværs af platforme.

Hurtig reference: CSS Italic snydeark

Du behøver ikke at gennemgå dokumentationen hver gang. Her er en hurtig reference, der dækker alle de vigtigste CSS kursivværdier, selektorer og HTML-tags, du rent faktisk vil bruge.

Skrifttypeværdier

/* Normal opretstående tekst */ p { font-style: normal; } /* Ægte kursiv ved brug af fontens kursivvariant */ p { font-style: italic; } /* Mekanisk skrå tekst */ p { font-style: oblique; } /* Variabel skrå skrifttype med gradkontrol */ p { font-style: oblique 20deg; }

Almindelige selektormønstre

/* Alle afsnit */ p { font-style: italic; } /* Elementer med en klasse */ .caption { font-style: italic; } /* Et unikt element */ #tagline { font-style: italic; } /* Indlejret: em i et blockquote */ blockquote em { font-style: italic; font-weight: bold; }

HTML-tagreference

Tag	Type	Hvornår skal man bruge
<em>	Semantisk	Betoning af betoning, der ændrer betydning
<i>	Stilistisk	Tekniske termer, fremmedord, skibsnavne, titler
CSS-klasse	Kun visuelt	Styling uden semantisk intention

Konklusion

Det er ligetil at kursivere tekst i CSS, når du først har forstået det fulde billede. Egenskaben font-style giver dig præcis kontrol over, hvordan teksten hælder, og ved at parre den med de rigtige HTML-tags sikrer du, at din styling har mening for både mennesker og maskiner.

For at opsummere de vigtigste konklusioner:

• Brug font-style: italic; i et eksternt stylesheet for at få ren og vedligeholdelig kode.

• Bruges <em>når vægt ændrer betydningen af ​​en sætning. Bruges <i>til stilistiske konventioner såsom skibsnavne, fremmedord eller en alternativ stemme.</i></em>.

• Indlæs altid den kursive variant af din valgte skrifttype for at undgå browsersyntetiserede hældninger.

• Husk tilgængelighed. Stol aldrig udelukkende på kursiv til at formidle vigtig tekst.

• Test dine kursive stilarter på mobile enheder og på tværs af forskellige browsere, før du udgiver.

Hvis du bygger eller redesigner en hjemmeside og ønsker, at alle detaljer, fra typografi til sidehastighed, skal håndteres af eksperter, er Seahawk Media her for at hjælpe.

Vores team bygger højtydende hjemmesider, der ser flotte ud og rangerer godt. Kontakt os for at tale om dit næste projekt.

Ofte stillede spørgsmål om kursivering af tekst i CSS