unicode-rangeOmaisuus CSS on käyttävät @font-facemääritellä merkkejä, jotka tukevat fontti.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )Toisin sanoen @font-faceviittaa ominaisuuteen ja päättää, pitäisikö sen ladata ja käyttää fonttia sen perusteella, vastaavatko merkit tai merkistöalue HTML-asiakirjassa olevia.
Fontin kasvot: Hei HTML, vastaavatko jotkut seuraavista merkeistä sivulla olevia?
HTML: Jep, joukko heistä tekee.
Font-Face: Hienoa, tässä on kirjasintiedosto, jonka sinun pitäisi ladata näyttääksesi nämä merkit.
Tärkeä semanttinen ero, joka meidän tulisi kutsua tässä, on se unicode-range, mikä määrittää, mihin kirjasimiin fonttia voidaan käyttää sen sijaan, mitä merkkejä fonttia on käytettävissä. Toisin sanoen, jos julistaa unicode-rangepäälle @font-faceja merkkien ladattua HTML-dokumenttiin ottelu tällä alueella, niin fontti ohjelma lataa ja toimia käytännössä.
Voit kuvitella suorituskykyedut, jotka avautuvat tällä ominaisuudella. Voimme esimerkiksi ladata mukautetun fontin vain, jos se sisältää tiettyjä merkkejä sen sijaan, että lataamme fontin aina kaikissa tilanteissa.
Jake Archibaldin jakaman kätevän temppun ansiosta on jopa tapa yhdistää kaksi @font-facesarjaa samassa font-facekiinteistöilmoituksessa. Ajatuksena on, että yksi @font-facesarja ohittaa toisen sovitetun unicode-range, optimoivan suorituskyvyn tai yksinkertaisesti sivun typografian parantamisen perusteella.
Arvot
Mikä tahansa unicode-merkkikoodi tai -alue on hyväksyttävä unicode-rangearvo. Huomaat, että unicode-pisteitä edeltää U+enintään kuusi merkkiä, jotka muodostavat merkkikoodin. Pisteitä tai alueita, jotka eivät noudata tätä muotoa, pidetään virheellisinä ja ne aiheuttavat ominaisuuden ohittamisen.
- Yksi merkki (esim.
U+26) - Merkkialue (esim.
U+0025-00FF) - Jokerimerkki (esim.
U+4??)
Jokerimerkki on hankala joukko. Kukin ?edustaa jokerimerkkiä, jossa kaikki arvot vastaavat. Luulisi, että se tarkoittaa, että voit korvata koko asian jollakin tällä tavalla:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Tämä ei kuitenkaan toimi. Syynä on se, että ?merkkijono tarkoittaa merkkikoodia, joka johtaa 0, mikä tarkoittaa, että enintään viittä kysymysmerkkiä voidaan käyttää huolimatta siitä, että unicodes hyväksyy enintään kuusi merkkiä.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Siellä on paljon unicode-vaihtoehtoja. Latin Latin ( 0020-007F) on luultavasti yleisin alue englanninkielisissä sivustoissa, mutta unicode-table.com tarjoaa kattavan luettelon kaikista käytettävissä olevista alueista ja koodeja tietyille merkeille.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Lisälukemista
- CSS-fonttien moduulin tason 3 määrittely
- Unicode-taulukko: Resurssi, joka viittaa Unicode-merkistöihin ja -koodeihin.
- @ Font-face: CSS-Tricks -viestin avulla kerrotaan, miten se
@font-facetoimii eri tekniikoilla ja toimivilla esimerkeillä. - Mikä on kirjasimen ominaisuuksien ilmoittamisen ongelma @ font-face ?: CSS-Tricks-viestissä, joka liittyy siihen, kuinka kirjasinominaisuuksien vastaavia arvoja voidaan käyttää määrittämään, ladataanko selaimen mukautettu kirjasin.