Brugerhåndbog Annuller

Brug af webskrifttyper med CodePen

  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. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. How to use fonts in Adobe Muse
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to 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?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. 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

CodePen er en webbaseret HTML-, CSS- og JavaScript-kodeeditor, der lader dig eksperimentere med kode direkte i browseren. Du kan bruge tilpassede webskrifttyper direkte i dine penne.

Vælg de skrifttyper, du vil bruge

Følg vejledningen i webskrifttyper for at vælge nogle skrifttyper, og opret dit webprojekt.

Føj indlejringskoden til pennen

Indlejringskoden kan føjes til CodePen UI i feltet "Ting til <head>" i HTML-editorens indstillingsmenu eller i menuen "CSS > Tilføj ekstern CSS".

For at finde indlejringskoden til dit projekt skal du besøge siden for webprojekter og finde projektnavnet. Kopiér og indsæt standard CSS-indlejringskoden for det pågældende projekt på en af disse placeringer.

Brug af Codepen med standard CSS-indlejringskoden

Brug af Codepen ved direkte at sammenkæde CSS-filen

Anvend skrifttyperne i din CSS

Nu kan du bruge skrifttype-familienavnene i pennens CSS-editor, og skrifttyperne vil straks være synlige i Live View.

CodePen-editor med webskrifttype anvendt

Det skrifttype-familienavn, der skal bruges i CSS, er også angivet i webprojektet. Læs mere om brug af skrifttyper i CSS.

CSS-oplysninger på webprojektsiden

Forkning af penne

Offentlige penne kan forkes, så andre brugere kan bygge videre på din kode. Webskrifttyperne vil også fungere i den forkede pen.

Sletning af et projekt eller opsigelse af dit abonnement

Hvis du sletter det projekt, du bruger på CodePen, eller opsiger dit abonnement, vil skrifttyperne ikke længere være tilgængelige for nogen af de penne, der bruger den indlejrede kode. Dette inkluderer din originale pen, såvel som alle kuglepenne, der blev forket fra den. De reserveskrifttyper, der er angivet i CSS, vil blive anvendt i stedet for de tilpassede webskrifttyper.

 Adobe

Få hjælp hurtigere og nemmere

Ny bruger?