Brukerveiledning Avbryt

Bruke webskrifter 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. 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

CodePen er et nettbasert HTML-, CSS- og JavaScript-program for koderedigering som lar deg eksperimentere med kode direkte i nettleseren. Du kan bruke egendefinerte webskrifter direkte i Pens.

Velg skriftene du vil bruke

Følg veiledningen for webskrifter for å velge skrifter og opprette nettprosjektet ditt.

Legg til koden for innebygging i Pen

Innebyggingskoden kan legges til i CodePen-grensesnittet i feltet "Stuff for <head>" i Innstillinger-menyen i HTML-redigeringsprogammet eller i menyen "CSS > Legg til ekstern CSS"

Hvis du trenger innebyggingskoden for prosjektet ditt, går du til Webprosjekter-siden og finner prosjektnavnet. Kopier og lim inn standard CSS-innebyggingskoden for prosjektet på en av disse plasseringene.

Bruke Codepen sammen med den standard CSS-innebyggingskoden

Bruke Codepen ved å koble til CSS-filen direkte

Bruke skriftene i CSS-en din

Nå kan du bruke skriftfamilienavnene i CSS-redigeringsprogrammet til Pen. Skriftene blir synlige umiddelbart i Live View.

CodePen-redigeringsprogrammet med webskrift er tatt i bruk

Skriftfamilienavnet som skal brukes i CSS, er også oppført i webprosjektet; les mer om bruk av skrifter i CSS.

CSS-informasjon på webprosjekter-siden

Forgrene Pens

Offentlige Pens kan forgrenes, slik at andre brukere kan bygge på koden din. Webskriftene fungerer også i forgrenede Pens.

Slette et prosjekt eller kansellere abonnementet ditt

Hvis du sletter prosjektet du bruker på CodePen eller kansellerer abonnementet ditt, blir skriftene utilgjengelige for alle Pens som bruker den innebygde koden. Dette inkluderer den originale Pen-en, i tillegg til eventuelle Pens som ble forgrenet fra den. Reserveskriftene som er spesifisert i CSS-en, tas i bruk i stedet for de egendefinerte webskriftene.

Få hjelp raskere og enklere

Ny bruker?