Användarhandbok Avbryt

CSS-väljare

CSS-väljare talar om för webbläsaren var webbteckensnitten ska användas, samt vikten och stilen på teckensnittet som ska användas i texten.

Använda font-family-namnen i CSS-koden

sidan Webbprojekt anges CSS-font-family-namnet, den numeriska vikten och teckensnittsstilen för varje teckensnitt i projektet. Klicka på länken Redigera projektet för att se CSS-detaljerna för varje projekt.

bild

När du har infogat inbäddningskoden i ditt dokument ska du använda dessa font-family-namn i CSS-koden för att tillämpa teckensnitten på texten. Exempel:

h1 {
font-family: "brandon-grotesque", sans-serif;
}
h1 { font-family: "brandon-grotesque", sans-serif; }
h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Ange reservteckensnitt

Om en användares webbläsare inte stöder webbteckensnitt eller om de inte läses in av någon anledning, kommer reservteckensnitten i CSS-stacken att användas i stället.

Teckensnittsstacken bör innehålla minst ett reservteckensnitt som är tillgängligt på alla plattformar (t.ex. Georgia eller Arial), följt av ett generiskt teckensnittsfamiljenamn (t.ex. serif eller sans-serif). Om webbläsaren inte kan hitta det första teckensnittet försöker den med det andra och så vidare.

Använda flera vikter och stilar

Du kan ange andra teckensnittsvikter än ”normal” och ”bold” genom att använda numeriska teckensnittsviktsvärden i CSS-koden. De numeriska värdena motsvarar oftast dessa vikter:

  • 100 = thin
  • 200 = extra-light
  • 300 = light
  • 400 = normal, book
  • 500 = medium
  • 600 = demi-bold
  • 700 = bold
  • 800 = heavy
  • 900 = black

Du hittar de numeriska värdena för alla teckensnitt i ditt projekt på webbprojektsidan.

bild

Använd t.ex. denna CSS-kod för att tillämpa vikten 700 av ett teckensnitt på h1-elementet:

h1 {
font-weight: 700;
}
h1 { font-weight: 700; }
h1 {
  font-weight: 700;
}

Använda variationsspecifika namn i Internet Explorer 8

Internet Explorer 8 läses maximalt in fyra vikter per familj, och att använda två närbesläktade vikter (t.ex. 600 och 700) kan leda till att endast en vikt läses in korrekt. Adobe Fonts tillhandahåller variantspecifika teckensnittsfamiljenamn för dessa versioner av webbläsaren för att hantera bägge dessa fel.

Det variationsspecifika namnet ska läggas till i början av font-family-stacken vid behov, före huvudsläktnamnet:

#post-title {
font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
font-style: normal;
font-weight: 700;
}
#post-title { font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; }
#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

Namnen består av det vanliga font-family-namnet följt av ett bindestreck, följt av en beskrivning av teckensnittsvariationen (FVD med en engelsk förkortning). Det variationsspecifika namnet för brandon-grotesque som innehåller teckensnittet med vikten 700 är t.ex. brandon-grotesque-n7.

Det variationsspecifika namnet är odefinierat i webbläsare som inte har dessa problem, så de kommer att använda hela familjenamnet, som är på andra plats i stacken.

De flesta behöver inte använda dessa ytterligare font-family-namn. Du behöver bara lägga till dem om du har problem med att teckensnitt visas felaktigt i just Internet Explorer 8.

Få hjälp snabbare och enklare

Ny användare?