Käyttöopas Peruuta

CSS-valitsimet

  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

CSS-valitsimet kertovat selaimelle, missä käyttämiäsi verkkokirjasimia on käytettävä ja että minkä paksuisia ja tyylisiä kirjasimien pitäisi olla tekstissä.

Font-family-nimien käyttäminen CSS:ssä

Verkkoprojektit-sivulla on lueteltu CSS:n font-family-nimi, numeerinen paksuus ja projektin kaikkien kirjasimien kirjasintyyli. Voit tarkastella kunkin projektin CSS-tietoja napsauttamalla Muokkaa projektia ‑linkkiä.

kuva

Kun olet lisännyt upotuskoodin dokumenttiisi, käytä näitä font-family-nimiä CSS:ssä kirjasimien soveltamiseksi tekstiin. Esimerkiksi:

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

Varakirjasimien määrittäminen

Jos käyttäjän selain ei tue verkkokirjasimia tai ne eivät jostakin syystä lataudu, käytetään CSS:n pinossa olevia varakirjasimia.

Kirjasinpinossa on oltava vähintään yksi varakirjasin, joka on yhdenmukaisesti saatavana kaikissa ympäristöissä (esimerkiksi Georgia tai Arial), ja sen perässä on oltava yleinen font-family-nimi (esimerkiksi serif tai sans-serif). Jos selain ei löydä ensimmäistä kirjasinta, se kokeilee toista kirjasinta ja niin edelleen.

Useiden paksuuksien ja tyylien käyttäminen

Voit määrittää normaalin ja lihavoidun lisäksi myös muita kirjasimien paksuuksia käyttämällä numeerisia font-weight-arvoja CSS:ssä. Numeeriset arvot vastaavat yleensä seuraavia paksuuksia:

  • 100 = ohuin
  • 200 = hyvin ohut
  • 300 = ohut
  • 400 = normaali, kirja
  • 500 = lievästi lihavoitu
  • 600 = puolilihavoitu
  • 700 = lihavoitu
  • 800 = paksu
  • 900 = paksuin

Löydät kaikkien projektisi kirjasimien numeeriset arvot Verkkoprojektit-sivulta.

kuva

Käytä esimerkiksi tätä CSS:ää, jos haluat käyttää h1-elementin kirjasimessa paksuutta 700:

h1 {
  font-weight: 700;
}

Muunnelmakohtaisten nimien käyttäminen Internet Explorer 8:ssa

Internet Explorer 8 lataa enintään neljä paksuutta kirjasinperhettä kohti, ja kahden läheisesti toisiinsa liittyvän paksuuden (esim. 600 ja 700) käyttäminen voi johtaa siihen, että vain yksi paksuus latautuu oikein. Adobe Fonts tarjoaa näitä selainversioita varten muunnelmakohtaisia font-family-nimiä, joilla voidaan hallita näitä molempia virheitä.

Muunnelmakohtainen nimi on tarvittaessa lisättävä font-family-pinon alkuun, ennen kirjasinperheen ensisijaista nimeä:

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

Nimet muodostuvat normaalista font-family-nimestä, sen perässä olevasta viivasta ja kirjasinmuunnelman kuvauksesta (Font Variation Description, FVD). Esimerkiksi paksuuden 700 sisältävän brandon-grotesque-kirjasimen muunnelmakohtainen nimi on brandon-grotesque-n7.

Muunnelmakohtaisen nimen määritys poistetaan selaimissa, joissa tätä ongelmaa ei ole, joten niissä käytetään täydellistä kirjasinperheen nimeä, joka on pinossa toisena.

Useimpien käyttäjien ei tarvitse käyttää näitä ylimääräisiä font-family-nimiä. Sinun on lisättävä ne vain silloin, jos kirjasimien näyttämisessä on ongelmia ja ne eivät näy Internet Explorer 8:ssa oikein.

 Adobe

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?

Adobe MAX 2024

Adobe MAX
Luovuuskonferenssi

14.–16.10. Miami Beach ja verkossa

Adobe MAX

Luovuuskonferenssi

14.–16.10. Miami Beach ja verkossa

Adobe MAX 2024

Adobe MAX
Luovuuskonferenssi

14.–16.10. Miami Beach ja verkossa

Adobe MAX

Luovuuskonferenssi

14.–16.10. Miami Beach ja verkossa