Käyttöopas Peruuta

Verkkokirjasimien käyttäminen CodePenillä

  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. Using web fonts in Muse
    9. Packaging font files
    10. Troubleshooting guide: Adding fonts
    11. Added fonts aren't showing to font menu
    12. "Unable to add one or more fonts" or "A font with the same name is already installed"
    13. 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. 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 on verkkopohjainen HTML-, CSS- ja JavaScript-koodieditori, jonka avulla voit kokeilla koodia suoraan selaimessa. Voit käyttää mukautettuja verkkokirjasimia suoraan kynilläsi.

Käytettävien kirjasimien valitseminen

Valitse kirjasimet ja luo verkkoprojekti toimimalla verkkokirjasimien opastusohjelmassa annettujen ohjeiden mukaan.

Upotuskoodin lisääminen kynään

Upotuskoodi voidaan lisätä CodePenin HTML-editorin asetusvalikon ”Stuff for <head>” -kentässä tai ”CSS > Add External CSS” ‑valikossa.

Löydät projektisi upotuskoodin siirtymällä Verkkoprojektit-sivulle ja etsimällä projektisi nimen. Kopioi ja liitä projektin oletusarvoinen CSS-upotuskoodi johonkin näistä sijainneista.

CodePenin käyttäminen oletusarvoisen CSS-upotuskoodin kanssa

CodePenin käyttäminen linkittämällä CSS-tiedosto suoraan

Kirjasimien käyttäminen CSS:ssä

Voit nyt käyttää kirjasinperheiden nimiä kynän CSS-editorissa, ja kirjasimet näkyvät välittömästi reaaliaikaisessa näkymässä.

CodePen-editori, jossa verkkokirjasin on käytössä

CSS:ssä käytettävä kirjasinperheen nimi näkyy myös verkkoprojektissa. Lue lisää kirjasimien käytöstä CSS:ssä.

Verkkoprojektisivun CSS-tiedot

Kynien jakaminen

Julkiset kynät voidaan jakaa, jolloin muut käyttäjät voivat kehittää koodiasi. Verkkokirjasimet toimivat myös jaetussa kynässä.

Projektin poistaminen tai tilauksen peruuttaminen

Jos poistat CodePenissä käyttämäsi projektin tai peruutat tilauksesi, kirjasimet eivät enää ole kyseistä upotuskoodia käyttävien kynien käytettävissä. Tämä koskee sekä alkuperäistä kynääsi että kaikkia siitä jaettuja kyniä. CSS:ssä määritettyjä varakirjasimia käytetään mukautettujen verkkokirjasimien sijaan.

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?