Käyttöopas Peruuta

OpenType-ominaisuuksien käyttäminen

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. 

kuva

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";
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
-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";
}
.class { font-variant-caps: small-caps; font-feature-settings: "smcp"; }
.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 */
}
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 */ }
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";
}
.class { font-variant-caps: small-caps; font-feature-settings: "onum", "smcp"; }
.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;
font-feature-settings: "swsh" 2;
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;
}
.class { font-variant: common-ligatures, oldstyle-nums; }
.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";
}
.class { font-feature-settings: "liga", "onum"; }
.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ä.

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?