Kuinka kääntää kuvakkeet Web-fontiksi
Olin luomassa hienoja kuvakkeita verkkosivujen uudelleensuunnittelulle, jota olin tekemässä, ja esittelin uuden sivuston vanha iPad. Asettelu näytti OK normaalikokoisena, mutta zoomaamalla sivun osaan, huomasin yhtäkkiä, että kuvani oli epäselvä, vaikka tekstipohjainen otsikko oli vielä terävä ja terävä. Uudemmassa Retina-näytöllä iPadissa kuvakkeet eivät näyttäneet kovin teräviä, vaikka normaalikokoisina.
Ensimmäinen idea, jonka minulla oli, oli luoda kaksikokoisia sprite -kuvia ja asettaa ne näyttämään puolet niiden koosta käyttäen CSS: ää. Vaikka tämä teki heidät paremmaksi Retina-näytöllä normaalikokoisena, heti kun aloitit hyppäämisen ja zoomauksen, epätarkkuus palautui. Mutta teksti oli vielä terävä ja terävä.
Vastaus oli ilmeinen. Minun tarvitsi kääntää kuvakkeet fontiksi.
Tässä opetusohjelmassa tarkastelemme, miten käännetään vektorikuvakkeet web-kirjasinkirjastoon käyttäen suurta ilmaista web-sovellusta nimeltä IcoMoon. Seuraavaksi tarkastelemme, miten käytetään luotuja kirjasintatiedostoja ja CSS-tiedostoja verkkosivulla.
Ikoni fontin käytön edut
Kuvakkeiden fontilla on useita etuja kuin bittikarttakuvien lisäksi kuvan terävyys.
- Soveltuvuus: kuvakkeen fontti on paljon pienempi tiedostokokoisena kuin kuvasarja, varsinkin jos olet käyttänyt kaksoiskokoisia kuvia Retina-näytöille. Kun fontti on ladattu, kuvakkeet näkyvät heti, ilman kuvan lataamista.
- Skaalautuvuus: kuvakkeen fontti voidaan asettaa mihin tahansa kokoon asettamalla
font-sizeomaisuutta mukana olevassa CSS: ssä. Näin voit kokeilla eri kokoisia; kun taas bittikarttatiedostoille, sinun on tuotava kuvatiedosto kussakin koossa. - Joustavuus: tekstiefektejä voidaan helposti soveltaa kuvakkeeseen, mukaan lukien värit, pudotusvarjot ja rollover-tilat. Ne näkyvät myös hyvin värin tai kuvan taustakuvan suhteen.
- Yhteensopivuus: kaikki nykyaikaiset selaimet ja vanhoja selaimia tukevat verkko-kirjasimet, jopa IE 6 ja aikaisemmat.
Joten, aloitetaan!
Kuvakkeiden fontin luominen
Symbolikirjastoja voidaan rakentaa käyttämällä erityistä fontti-luomisohjelmaa, kuten kuvioita , mutta ammattimainen typografiatyökalu on aivan tarpeiden tai vaatimusten lisäksi yksinkertaisen kuvakkeiden fontin rakentamisessa, jossa merkkien välinen suhde (eli kirsting ja ligatures) ei ole tärkeä.
Selvästi helpoin tapa on käyttää hyvästä ilmaisesta verkko-sovelluksesta nimeltään IcoMoon , jonka Keyamoon, joka poistaa kaikki haasteet muuntaa symboleja Web-fontti.
Tämä HTML5-sovellus poistaa kaikki kirjasintitiedostojen luomiseen liittyvät kiput yksinkertaisiin käyttötarkoituksiin, kuten rakennuskuvakefontteihin. IcoMoonissa on jo valmiiksi ladattuja ikonikokonaisuuksia, ja voit lisätä kirjastoosi, joista suurin osa voidaan käyttää ilmaiseksi (tarkista lisensointi). Jos etsit melko tavallisia kuvakkeita, kuten "tiedostojen lataus" ja "ostoskärry", saatat huomata, että yhden näistä on parempi luoda omasi.
Askel askeleelta
1. Valmista kuvasi
Aluksi sinun on luotava kuvakkeet vektoripiirrosohjelmassa, joka pystyy viemään SVG-muotoon, kuten Illustrator tai Inkscape.
Kun suunnittelet, voit työskennellä haluamallasi värillä, mutta kuvakkeiden on oltava yksi kiinteä väri. Varmista, että jokainen kuvake on suunnilleen sama koko. Jos sinulla on yksi ikoni paljon pitempi tai pidempi kuin toinen, se vaikeuttaa yhtenäisen fontin rakentamista. Täällä olen joutunut pienentämään ilmailumerkkini leveyttä, jotta se vastaisi toisia.
2. Puhdista
Tarkista jokaisen kuvakkeen varovasti varmistaaksesi, ettei siinä ole puutteita - pienemmissä kooissa OK-koon yksityiskohdat saattavat piilottaa pieniä vikoja suurennettaessa. Seuraavassa kuvakkeessa minun on poistettava lohkeamattomat vaiheet, jotka ovat muodostuneet elementtien kerrostuksen yhteydessä.
Illustratorissa käytetään Pathfinder-työkalua päällekkäisten elementtien yhdistämiseen ja Minus Front -elementin poisto-elementtien, kuten tähtäimen, näihin kuvakkeisiin.
Keskeisenä periaatteena on varmistaa, että kuvasi on luettavissa pieninä mittakaavoin. Yksinkertaista mahdollisimman paljon.
3. Vie SVG: hen
Valitse nyt kuvake ja kopioi se ja liitä se uuteen neliöasiakirjaan (esimerkiksi 200 × 200 pikseliä). Skaalaa kuvake niin, että se sopii. Saattaa olla hyödyllistä asettaa perusviivain. Väritä kuvake niin, että se on kiinteä musta valkoisella taustalla.
Valitse nyt File… Save as ja tallenna tiedosto SVG-tiedostona. Käytä oletusarvoisia SVG-asetuksia. Kun olet tehnyt tämän kaikelle kuvakkeelle, olet valmis luomaan Web-kirjasimen.
4. Tuoda IcoMoon-tuotteeksi
Avaa IcoMoon-verkkosovellus . Voit tuoda kuvakkeen napsauttamalla "Tuo kuvakkeita" -painiketta ja valitsemalla sitten lisäävät SVG-tiedostot - voit lisätä useita tiedostoja kerralla. Ne näkyvät sitten kohdassa "Mukautetut kuvakkeet". Jos ne on korostettu keltaisella, ne ovat osa luomasi kuvake-kirjasinta. Tässä esimerkissä näet, että olen päättänyt olla viemättä omia kuvakkeitani, ja olen lisännyt yhden kuvakkeista "Mini-kuvakkeet".
5. Vie fontti IcoMoonista
Voit klikata "Muokkaa" -painiketta, jos haluat säätää kuvakkeen sijaintia, mitoitusta tai kiertoa. Käytä "Tallenna kopio" -painiketta luomalla kuvamuunnelmia (esimerkiksi kuvakkeen peilikuva). Lisää merkityksellinen tunniste kuvakkeeseen, koska sitä luodaan sen luokka.
Kun olet valmis, napsauta näytön alareunassa olevaa "Fontti" -painiketta aloittaaksesi fontin luomisen. Tässä voit määrittää, minkä kuvakkeen kartoitettu johon merkkiin. esimerkiksi jos kuvakekokoelmasi on kuusi kuvaa kehruupallosta, voit antaa kuville kehyksille merkkiä q, w, e, r, t ja y . Valitse haluamasi fontin nimi. Voit myös säätää fontin tietoja, mutta jos et aiota asettaa mukautettua kirjasinta vakiotekstiä pitkin, sinun ei tarvitse huolestua.
6. Lataa fonttitiedostot
Lataa fonttipaketti laitteellesi napsauttamalla Lataa. Se on alikansio, joka sisältää fontit itse (WOFF-, EOT- ja TTF-muodoissa) sekä esimerkkisivun HTML-sivun ja vastaavan CSS: n. On jopa JavaScript-tiedosto, jossa on kiertotapa, jos tarvitset tukea IE 6 tai 7.
Kopioi fonttien alikansio sivustollesi, jos haluat lisätä fontit projektiin. Voit kopioida ja liittää CSS: n tyylistä.css omaksi sivustosi CSS-tiedostoksi, mutta minun lähestymistapana on nimetä se fonts.css: ksi ja pitää se erillisenä CSS-tiedostona. Tämän jälkeen sinun on lisättävä viittaus tähän CSS-tiedostoon HTML-tiedostossasi käyttämällä suhteellista linkkiä:
<link rel="stylesheet" href="fonts.css" />CSS-tiedoston @ font-face -elementissä sinun on muutettava URL-viittaus fonttien uusiin suhteellisiin sijaintiin tai voit yksinkertaisesti pudottaa fonttikansioasi tyyliarkkikansioon.
7. Fontin kutsu
Kuten esimerkkisivun index.html -tiedostossa näet, mukautettua kirjasinta voi viitata kahdella tavalla joko sen luonteen (unicode tai nimensä) tai sen luokan nimen perusteella. Ensimmäinen esimerkki käyttää HTML5 -datakuvaketta
<div aria-hidden="true" data-icon="g"></div>Tässä fs1- luokkaa käytetään määrittämään fontin koko. Ilma -piilotettu viite auttaa varmistamaan, ettei mikään näytönlukija puhu.
Toinen menetelmä käyttää span-elementtiä:
<span aria-hidden="true"></span>Tämä menetelmä on hyödyllinen, kun haluat symbolin istumaan normaalin tekstin kanssa.
Jos haluat tehdä kuvakkeen linkin, voit kääriä sen kaikki href :
8. Kehittyneet ideoita
Kuten olemme juuri löytäneet lepotilassa, kuvakkeen värin muuttaminen on yhtä helppoa kuin väriominaisuuden määrittäminen CSS: ssä, ja koko muuttaminen on yhtä helppoa kuin fonttikokoisen ominaisuuden asettaminen. Voit myös asettaa muita ominaisuuksia, kuten tekstin varjon ja läpinäkyvyyden, säilyttäen samalla fontin tarkkuuden riippumattomuuden.
Kokeile, ja takaan, ettet koskaan käytä bittikarttakuvia uudelleen.
Oletko kokeillut kuvakkeiden fontteja? Miten olet löytänyt sen? Kerro meille kommentit.