- Adobe Fonts User Guide
- Introduction
- Font licensing
- Font licensing
- Manage your account
- Licensing for Creative Cloud for enterprise customers
- Adding font licenses to your account
- Removing fonts from the subscription library
- Adobe Fonts not available to Adobe IDs registered in China
- Why aren't these fonts included in my Creative Cloud subscription?
- Morisawa font removal September 2021
- Getting and using fonts
- Using Adobe Fonts in Creative Cloud apps
- Manage your fonts
- Resolve missing fonts in desktop applications
- Using fonts in InDesign
- Fonts and typography
- Using web fonts in HTML5 Canvas documents
- Using fonts in InCopy
- Using web fonts in Muse
- Packaging font files
- Troubleshooting guide: Adding fonts
- Added fonts aren't showing to font menu
- "Unable to add one or more fonts" or "A font with the same name is already installed"
- What happens when a font I'm using is updated by the foundry?
- Web design and development
- Add fonts to your website
- Troubleshooting guide: Adding fonts to a website
- Troubleshoot font issues
- Using web fonts in HTML email or newsletters
- Using web fonts with Accelerated Mobile Pages (AMP)
- CSS selectors
- Customize web font performance with font-display settings
- Embed codes
- Dynamic subsetting & web font serving
- Font events
- Why are my web fonts from use.typekit.net?
- Site can't connect to use.typekit.net
- Using web fonts with CodePen
- Browser and OS support
- Domains
- Using web fonts when developing locally
- Content security policy
- Printing web fonts
- Language support and OpenType features
- Font technology
OpenType-ominaisuudet ovat kuin kirjasimien salaisia lokeroita. Avaa ne, niin löydät tapoja saada fontit näyttämään ja käyttäytymään hienovaraisesti ja dramaattisesti eri tavoin. Kaikki OpenType-ominaisuudet eivät ole aina käytettävissä, mutta jotkin ominaisuudet ovat erittäin tärkeitä loistavan typografian kannalta.
Jos haluat käyttää kirjasimen OpenType-ominaisuuksia projektissasi, sinun on sisällytettävä ne verkkoprojektiin ja muotoiltava sitten tekstisi tarvittavalla CSS:llä. Perehdy syntaksioppaaseemme, jossa on esimerkkejä kaikista ominaisuuksista ja koodeista, joilla voit kopioida ja liittää ominaisuudet CSS-tiedostoon.
OpenType-ominaisuuksien lisääminen projektiin
Jos haluat sisällyttää kirjasimen OpenType-ominaisuudet verkkoprojektiin, siirry Verkkoprojektit-sivulle ja napsauta projektin Muokkaa-linkkiä. Valitse Merkistö-osiossa OpenType-ominaisuudet-valintaruutu.
Kun valintaruutu on valittuna, näet luettelon kyseisen verkkokirjasinperheen käytettävissä olevista ominaisuuksista, kuten ligatuureista, vaihtoehtoisista merkeistä tai kapiteeleista.
Luettelossa näkyvät OpenType-ominaisuudet, jotka ovat käytettävissä kirjasinperheen kaikkia paksuuksia ja tyylejä varten. Jos ominaisuus sisältyy vain tiettyihin paksuuksiin tai tyyleihin, se ei sisälly luetteloon.
Käytettävien ominaisuuksien selaintuen tarkistaminen
Font-variant- ja font-feature-settings-arvojen heikko selaintuki tarkoittaa, että OpenType-ominaisuudet eivät ehkä toimi kaikissa sinulle tärkeissä konteksteissa oikein.
Tuki on hämmästyttävän vaihteleva. Uudemmat selainversiot, jotka väittävät tukevansa ominaisuuksia, sisältävät poikkeuksia, ja vanhemmat selaimet, jotka eivät tue OpenType-ominaisuuksia, voivat lakata toimimasta niiden vuoksi. Oletusarvoisesti Chrome ei ota käyttöön ominaisuuksia, joiden pitäisi olla oletusarvoisesti käytössä (esimerkiksi yleisiä ligatuureja ja tilannekohtaisia vaihtoehtoja). macOS:n ja iOS:n Safari jättää huomioimatta kaikki määritetyt font-feature-settings-arvot sen sijaan, että se ottaisi muutamat ominaisuudet oletusarvoisesti käyttöön, ja sen oletusvalintoja ei voi muuttaa. Joissakin Firefoxin versioissa (versiossa 15 ja sitä aikaisemmissa versioissa) ilmenee ongelmia, kun käytössä on useita tyylijoukkoja. OpenType-ominaisuuksien ottaminen käyttöön Chrome 32:ssa ja sitä vanhemmissa versioissa estää verkkokirjasimia toimimasta.
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
Nykyinen selaintuki on vahvasti riippuvainen toimittajien etuliitteistä. CSS:n OpenType-ominaisuuksien syntaksi ‑ohjedokumentista löydät edellisen kaltaisia koodiesimerkkejä, jotka ovat täynnä toimittajan etuliitteitä sisältäviä ominaisuuksia.
Tekstin muotoileminen OpenType-ominaisuuksilla CSS:n avulla
OpenType-ominaisuuksien käyttöönottoon käytettävä CSS-syntaksi kehittyy edelleen. Sinun kannattaa tietää, että on olemassa sekä korkean tason että matalan tason ominaisuuksia – ja periytyminen on erityisen hankalaa.
CSS:n matalan tason font-feature-settings-ominaisuus on jossain määrin tuettu selaimissa toimittajien etuliitteiden avulla, mutta sen käyttö on hankalaa kahdesta syystä. Ensinnäkin se perustuu nelimerkkisiin OpenType-ominaisuustunnisteisiin, joita on vaikea muistaa. Toiseksi kaikki ominaisuustunnisteet on määritetty yhdessä ominaisuudessa, mikä voi olla mutkikasta. Perehdy tietyn OpenType-ominaisuuden syntaksiin ja useiden OpenType-ominaisuuksien käytön syntaksiin.
CSS:n korkean tason font-variant-ominaisuus ja sen aliominaisuudet ovat loistavia, sillä niissä käytetään luonnolliseen kieleen perustuvia arvoja, kuten ”small-caps” ja ”diagonal-fractions”. W3C haluaa meidän käyttävän näitä aina kun se on mahdollista, mutta selaintuki on olematonta. Syntaksiin kannattaa kuitenkin tottua.
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
Käytämme siis sekä font-variant- että font-feature-settings-arvoja ja pidämme mielessä, miten ne on suunniteltu toimimaan. Määritämme CSS:ssä ensin edellisen koodin tapaan helppolukuisen font-variant-arvon.
Periytyminen
Koska font-feature-setting on matalan tason ominaisuus, joka on tarkoitettu ”erikoistapauksiin, joissa sen käyttö on ainoa tapa käyttää tiettyä harvoin käytettyä kirjasimen ominaisuutta”, se ohittaa font-variant-arvon lähteen järjestykseen katsomatta. Ole kuitenkin varovainen, sillä se ohittaa myös itsensä:
body {
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp"; /* disables onum from body declaration */
}
Kaikki perityt font-feature-settings-arvot ohitetaan, kun ominaisuus otetaan uudelleen käyttöön. Edellisen esimerkin elementeissä, jonka luokkien luokissa sekä kapiteelit (smcp) että gemenanumerot (onum) on otettu käyttöön, onum-arvo on lisättävä uudelleen. Voisimme siis kirjoittaa ilmoituksen uudelleen seuraavalla tavalla:
.class {
font-variant-caps: small-caps;
font-feature-settings: "onum", "smcp";
}
Indeksoidut font-feature-settings-arvot
Jotkin font-feature-settings-arvot ovat hieman monimutkaisempia. Edellisissä esimerkeissä jokainen arvo on tähän asti ollut merkkijono (tai pilkuilla eroteltu merkkijonojen joukko). Onum- ja smcp-arvojen kaltaisten ominaisuustunnisteiden läsnä- tai poissaolo on kuin binaarinen valinta: ominaisuudet ovat käytössä tai ne eivät ole käytössä.
Tässä on järkeä. Mutta mitä jos kirjasin sisältää esimerkiksi isosta A-merkistä kaksi erilaista koristemerkkiversiota? Tällöin emme ainoastaan halua ottaa koristemerkkejä käyttöön, vaan ottaa koristemerkit käyttöön ja valita tietyn koristemerkin. Voimme siis lisätä arvoon numeerisen indeksin merkkijonon perään:
font-feature-settings: "swsh" 2;
Pohdit ehkä, mitä numeroa sinun pitäisi käyttää tässä. Kuinka monta erilaista koristemerkkiä kirjasimessa on? Tämä vaihtelee kirjasinkohtaisesti. Jos arvoksi valitaan 0, se tarkoittaa, että koristemerkkiominaisuus poistetaan käytöstä. Sama koskee muita ominaisuuksia, joissa käytetään numeerisia indeksejä, kuten tyylivaihtoehtoja ja tyylijoukkoja.
Useiden OpenType-ominaisuuksien käyttäminen
Font-variant-ominaisuus on CSS:n tiivistelmäominaisuus kaikille font-variant-aliominaisuuksille. Voimme ottaa yleiset ligatuurit ja gemenanumerot käyttöön jotenkin seuraavaan tapaan:
.class {
font-variant: common-ligatures, oldstyle-nums;
}
Vastaavasti useita ominaisuuksia voidaan ottaa käyttöön käyttämällä font-feature-settings-ominaisuutta arvojen pilkulla erotellun luettelon kanssa:
.class {
font-feature-settings: "liga", "onum";
}
Molemmissa tapauksissa perityt arvot ohitetaan kokonaan, ja selaintuki voi vaihdella. Muista, että font-variant-arvot on joskus suunniteltu useiden ominaisuuksien samanaikaista käyttöönottoa ajatellen (katso isojen kirjainten muuntaminen kapiteeleiksi).
Resurssit
Jos olet valmis aloittamaan muotoilun CSS:llä, merkitse usein käytettyjen OpenType-ominaisuuksien syntaksisanasto kirjanmerkillä.
