CSS teckensnitt

CSS-teckenstil egenskaper definierar textens teckenstil, storlek, fetstil, stil (t.ex. kursiv) och form (t.ex. små versaler).

CSS teckensnittsserie

I CSS finns det två olika typer av teckensnittsnamn:

  • Allmän teckensnittsserie - Teckensnittsserier som har liknande utseende (t.ex. "Serif" eller "Monospace")
  • Specifik teckensnittsserie - Specifika teckensnittsserier (t.ex. "Times" eller "Courier")

Förutom olika specifika teckensnittsserier definierar CSS 5 allmänna teckensnittsserier:

  • Serif-teckensnitt
  • Sans-serif-teckensnitt
  • Monospace-teckensnitt
  • Kursivteckensnitt
  • Fantasy-teckensnitt

Om du behöver veta mer om teckensnittsserier, läs CSS teckensnittsserie.

Specificerad teckensnittsserie

Använd font-family-attributet Definiera textens teckensnittsserie.

Använd allmän teckensnittsserie

Om du vill att dokumentet ska använda ett sans-serif-teckensnitt utan att bry sig om vilket teckensnitt som används, är följande en lämplig deklaration:

body {font-family: sans-serif;}

Prova själv

Användaragenten kommer då att välja ett teckensnitt från sans-serif-teckensnittsserien (t.ex. Helvetica) och tillämpa det på body-elementet. Eftersom det finns en arv, kommer denna teckensnittsväljning också att tillämpas på alla element som innehåller body-elementet, om inte en mer specifik väljare överskrider den.

Specificerad teckensnittsserie

Förutom att använda en allmän teckensnittsserie kan du också ställa in mer specifika teckensnitt genom font-family-attributet.

Följande exempel sätter Georgia-teckensnitt för alla h1-element:

h1 {font-family: Georgia;}

Prova själv

Denna regel kan också skapa ett annat problem, om användaragenten inte har installerat Georgia-teckensnittet, måste användaragentens standardteckensnitt användas för att visa h1-elementet.

Vi kan lösa detta genom att kombinera ett specifikt teckensnittsnamn med en allmän teckensnittsserie:

h1 {font-family: Georgia, serif;}

Prova själv

Om läsaren inte har installerat Georgia, men har installerat Times-teckensnitt (ett teckensnitt i serif-teckensnittsserien), kan användaragenten använda Times för h1-elementet. Även om Times inte matchar Georgia helt och hållet, är det minst tillräckligt nära.

Därför rekommenderar vi att en allmän teckensnittsserie erbjuds i alla font-family-regler. På detta sätt erbjuds en säkerhetsventil, så att en kandidatteckensnitt kan väljas om användaragenten inte kan leverera ett specifikt teckensnitt som matchar regeln.

Om du är mycket bekant med teckensnitt kan du också ange en serie liknande teckensnitt för det angivna elementet. För att göra detta måste du placera dessa teckensnitt i prioriterad ordning och sedan koppla samman dem med kommatecken:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Prova själv

Enligt denna lista kommer användaragenten att söka efter dessa typsnitt i den ordning som listas. Om alla listade typsnitt inte är tillgängliga, väljs helt enkelt ett tillgängligt serif-typsnitt.

Användning av citattecken

Du kanske har lagt märke till att man använder enkla citattecken i de ovanstående exemplen. Endast när typsnittsnamnet innehåller en eller flera blanksteg (t.ex. New York) eller om typsnittsnamnet inkluderar symboler som # eller $, måste citattecken användas i font-family-uttrycket.

Antingen enkla eller dubbla citattecken kan användas. Men om en font-family-attribut placeras i HTML:s style-attribut, måste man använda det citattecken som inte används av attributet själv:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,</p>
 'New York', serif;">...

Prova själv

Typsnittsstil

font-style-attributetAnvänds mest för att specificera kursiv text.

Egenskapen har tre värden:

  • normal - Text visas normalt
  • italic - Text visas kursivt
  • oblique - Text visas med skuggning

Exempel

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Prova själv

Skillnaden mellan italic och oblique

font-style är mycket enkel: används för att välja mellan normal text, italic text och oblique text. Det enda som är lite komplext är att tydligt skilja mellan italic och oblique texter.

Kursiv (italic) är en enkel typsnittsstil som gör små justeringar i varje bokstavs struktur för att återspegla det förändrade utseendet. Till skillnad från detta är oblique-text en skuggad version av normal vertikal text.

I de flesta fall ser italic och oblique texter ut exakt samma i webbläsare.

Teckensnittsform

font-variant-attributetDet är möjligt att ställa in små versaler.

Mindre versaler är inte vanliga versaler, inte heller små bokstäver, denna typ av bokstäver använder olika stora versaler.

Exempel

p {font-variant:small-caps;}

Prova själv

Teckenfett

font-weight-attributetStäll in textens tygdtillstånd.

Använd nyckelordet bold för att ställa in texten i fet stil.

Nyckelorden 100 ~ 900 anger 9 nivåer av fetstil. Om en kropp har inbyggda fettnivåer, direktkopplas dessa nummer till fördefinierade nivåer, 100 motsvarar den tunnaste teckenformen, 900 motsvarar den tjockaste teckenformen. Numret 400 är likvärdigt med normal, medan 700 är likvärdigt med bold.

Om elementets fetstil är satt till bolder kommer webbläsaren att sätta en fetare teckenstil än den inarbetade värdet. I motsats till detta orsakar nyckelordet lighter att webbläsaren sänker fetthet i stället för att öka den.

Exempel

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Prova själv

Teckenstorlek

font-size-attributetStäll in textstorlek.

Förmågan att hantera textstorlek är viktig inom webbdesign, men du bör inte justera textstorlek för att göra stycken se ut som rubriker eller tvärtom.

Använd alltid korrekt HTML-titel, till exempel använd <h1> - <h6> för att markera rubriker, använd <p> för att markera stycken.

font-size-värdet kan vara absolut eller relativt.

Absolut värde:

  • Ställ in texten till en specifik storlek
  • Tillåt inte användare att ändra textstorlek i alla webbläsare (är inte fördelaktigt för tillgänglighet)
  • Absolut storlek är användbar när den fysiska storleken på utmatningen är fastställd

Relativ storlek:

  • Ställ in storlek i förhållande till omgivande element
  • Tillåt användare att ändra textstorlek i webbläsaren

Observera:Om du inte specificerar teckenstorlek är den standardstorleken för vanlig text (t.ex. stycken) 16 pixels (16px=1em).

Använd pixels för att ställa in teckenstorlek

Genom att ställa in textstorlek i pixels kan du ha full kontroll över textstorlek:

Exempel

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Prova själv

I Firefox, Chrome och Safari kan du justera storleken på texten i de ovanstående exemplen, men inte i Internet Explorer.

Även om det är möjligt att justera textstorlek med hjälp av webbläsarens zoomverktyg, är detta egentligen en justering av hela sidan, inte bara texten.

Använd em för att ställa in teckenstorlek

För att undvika problem med att justera text i Internet Explorer använder många utvecklare enheten em istället för pixels.

W3C rekommenderar att använda em-enheter för storlek.

1em är lika med den nuvarande teckenstorleken. Om en elements font-size är 16 pixlar, är 1em lika med 16 pixlar för detta element. När du sätter teckenstorlek ändras em-värdet relativt till föräldrelementets teckenstorlek.

Standardtextstorleken i webbläsaren är 16 pixlar. Därför är storleken på 1em 16 pixlar.

Du kan använda följande formel för att konvertera pixlar till em:pixels/16=em

(Notering: 16 är lika med föräldrelementets default font-size, antar att föräldrelementets font-size är 20px, då måste formeln ändras till:pixels/20=em

Exempel

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Prova själv

I ovanstående exempel är textstorleken i em-enheter densamma som textstorleken i pixlar i föregående exempel. Men om du använder em-enheter kan du justera textstorleken i alla webbläsare.

Tyvärr finns det fortfarande problem i IE. När textstorleken justeras, blir den större eller mindre än den normala storleken.

Kombinera procent och EM

En lösning som fungerar i alla webbläsare är att sätta en default font-size i procent för body-elementet (föräldrelementet):

Exempel

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Prova själv

Vår kod är mycket effektiv. Den visar samma textstorlek i alla webbläsare och tillåter alla webbläsare att skal textstorleken.

CSS teckenexempel:

Sätt textens tecken
Detta exempel visar hur man sätter textens tecken.
Sätt tecknets storlek
Detta exempel visar hur man sätter tecknets storlek.
Sätt tecknets stil
Detta exempel visar hur man sätter tecknets stil.
Sätt tecknets variant
Detta exempel visar hur man sätter tecknets variant.
Sätt tecknets tykvikt
Detta exempel visar hur man sätter tecknets tykvikt.
Alla teckenattribut i en deklaration
Detta exempel visar hur man använder kortformegenskaper för att sätta teckenattribut i en deklaration.

CSS teckenattribut

Egenskaper Beskrivning
font Kortformegenskaper. Fungerar till att sätta alla teckenattribut i en deklaration.
font-family Ställ in teckensnittsserien.
font-size Ställ in tecknets storlek.
font-size-adjust Intelligenta skalning av ersättningsfonten när föredragen font är otillgänglig (CSS2.1 har tagit bort detta egenskapsvärde.).
font-stretch Horizontal stretch av tecknet (CSS2.1 har tagit bort detta egenskapsvärde.).
font-style Ställ in tecknets stil.
font-variant Visa text i små kapitäl eller normal storlek.
font-weight Ställ in tecknets tjocklek.