Brugerhåndbog Annuller

CSS-vælgere

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Fonts added from Adobe Fonts
    2. Web fonts from Adobe Fonts
    3. Creative Cloud for enterprise customers
    4. Removed fonts
    5. Why aren't these fonts included in my Creative Cloud subscription?
    6. Why am I being asked to purchase a license for fonts in Adobe Fonts?
    7. Adobe Fonts not available to Adobe IDs registered in China
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Find fonts from images
    4. Resolve missing fonts in desktop applications
    5. Using fonts in InDesign
    6. Fonts and typography
    7. Using web fonts in HTML5 Canvas documents
    8. Using fonts in InCopy
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to the font menu
    13. "Unable to add one or more fonts" or "A font with the same name is already installed"
    14. What happens when a font I'm using is updated by the foundry?
    15. Hide fonts in Adobe programs
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Troubleshoot font issues
    4. Using web fonts in HTML email or newsletters
    5. Using web fonts with Accelerated Mobile Pages (AMP)
    6. CSS selectors
    7. Customize web font performance with font-display settings
    8. Embed codes
    9. Dynamic subsetting & web font serving
    10. Font events
    11. Why are my web fonts from use.typekit.net?
    12. Site can't connect to use.typekit.net
    13. Using web fonts with CodePen
    14. Browser and OS support
    15. Domains
    16. Using web fonts when developing locally
    17. Content security policy
    18. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

CSS-vælgere fortæller browseren, hvor den skal anvende de webskrifttyper, du bruger, samt tykkelsen og typografien af den skrifttype, der skal bruges til teksten.

Brug af skrifttypefamilienavnene i din CSS

Siden for webprojekter viser CSS-skrifttypefamilienavnet, numerisk tykkelse og skrifttypetypografi for hver skrifttype i projektet. Klik på linket "Rediger Project" for at se CSS-detaljerne for hvert projekt.

billedet

Når du har inkluderet indlejringskoden i dit dokument, skal du bruge disse skrifttype-familienavne i CSS til at anvende skrifttyperne på teksten. F.eks.:

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

Angivelse af reserveskrifttyper

Hvis en brugers browser ikke understøtter webskrifttyper, eller de af en eller anden grund ikke indlæses, vil reserveskrifttyperne i CSS-stakken blive brugt i stedet.

Skrifttypestakken skal indeholde mindst én reserveskrifttype, der er ensartet tilgængelig på tværs af platforme (såsom Georgia eller Arial), efterfulgt af et generisk skrifttype-familienavn (som serif eller sans-serif). Hvis browseren ikke kan finde den første skrifttype, vil den prøve den anden skrifttype osv.

Brug af flere tykkelser og typografier

Du kan angive andre skrifttypevægte end "normal" og "fed" ved at bruge numeriske skrifttypevægtværdier i CSS. De numeriske værdier svarer oftest til disse tykkelser:

  • 100 = tynd
  • 200 = v
  • 300 = let
  • 400 = normal, bog
  • 500 = medium
  • 600 = halvfed
  • 700 = fed
  • 800 = kraftig
  • 900 = sort

Du kan finde de numeriske værdier for alle skrifttyperne i dit projekt på Siden Webprojekter.

billedet

Brug f.eks. denne CSS til at anvende 700-tykkelsen af en skrifttype på h1-elementet:

h1 {
  font-weight: 700;
}

Brug af variationsspecifikke navne i Internet Explorer 8

Internet Explorer 8 indlæser maksimalt fire tykkelser pr. familie, og brug af to tæt forbundne tykkelser (f.eks. 600 og 700) kan kun resultere, at der kun indlæses én tykkelse korrekt. Adobe Fonts viser variationsspecifikke skrifttype-familienavne til disse versioner af browseren for at håndtere begge disse fejl.

Det variationsspecifikke navn skal tilføjes i begyndelsen af en skrifttype-familiestak efter behov, før hovedfamilienavnet:

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

Navnene består af det normale skrifttype-familienavn efterfulgt af en bindestreg efterfulgt af en beskrivelse af skrifttypevariation (eller font variation description – FVD). For eksempel er det variationsspecifikke navn for brandon-grotesque, der indeholder skrifttype med tykkelsen 700, brandon-grotesque-n7.

Det variationsspecifikke navn vil være udefineret i browsere, der ikke har disse problemer, så de vil bruge det fulde familienavn, der kommer på andenpladsen i stakken.

De fleste brugere behøver ikke at bruge disse ekstra skrifttypefamilienavne. Du skal kun tilføje dem, hvis du ser problemer med, at skrifttyper vises korrekt i Internet Explorer 8 specifikt.

Få hjælp hurtigere og nemmere

Ny bruger?