Hvernig á að kveikja táknin mín í vefletur
Ég hafði búið til nokkrar snyrtilegar tákn fyrir endurhönnun vefsíðna sem ég var að gera og ég sýndi fyrir nýju síðuna á gömlu iPad. Útlitið leit í lagi við venjulegan stærð en aðdráttur að hluta af síðunni sást ég skyndilega að táknið mitt væri óskýrt rusl en textasmiðað haus var enn skörp og skörp. Á nýrri Retina-skjá iPad virtust táknin ekki alveg skörp, jafnvel við venjulegan stærð.
Fyrsti hugmyndin sem ég átti var að búa til tvöfalt stóran sprite-mynd, sem setti þá á að sýna í helmingi stærð þeirra með CSS. Þó að þetta lék betur á sjónhimnu í venjulegri stærð, um leið og þú byrjaðir að klípa og stækka, kom blurriness aftur. En textinn var enn eins skörpum og skarpur.
Svarið var augljóst. Ég þurfti að snúa táknunum mínum inn í leturgerð.
Í þessari einkatími munum við líta á hvernig á að breyta vektoratáknum í vefrit með því að nota frábæra ókeypis vefforrit sem heitir IcoMoon. Þá munum við líta á hvernig á að nota mynda leturskrár og CSS á vefsíðu.
Kostir þess að nota leturgerðartákn
Skírnarfontur hefur nokkra kosti yfir myndum í punktum, auk myndskerpa.
- Hæfileikir: leturgerðartáknið mun vera mun minni í skráarstærð en röð af myndum, sérstaklega ef þú hefur notað tvöfalt stærri myndir fyrir sjónhimnuskjá. Og þegar letrið hefur hlaðist, mun táknin þín birtast strax, án þess að þurfa að hlaða niður mynd.
- Scalability: tákn letur getur verið stillt á hvaða stærð sem er með því að setja
font-sizeeign í meðfylgjandi CSS. Þetta gerir þér kleift að gera tilraunir með mismunandi stærðum; en fyrir myndir með punktamyndum verður þú að framleiða myndskrá í hverri stærð. - Sveigjanleiki: Hægt er að beita textaáhrifum á táknið þitt, þ.mt litir, sleppa skuggum og rollover-ríkjum. Þeir munu einnig sýna vel gegn hvaða lit eða mynd bakgrunn.
- Samhæfni: Vefur leturgerðir eru studdar af öllum nútíma vafra og eldri vafra, líka IE 6 og fyrr.
Svo, við skulum byrja!
Búa til leturgerð í leturgerð
Táknstafi geta verið byggð með hollur leturgerðartækni, svo sem Glyphs , en faglegt ritgerðartæki er langt umfram þarfir eða kröfur um að byggja upp einfalt táknmynd, þar sem sambandið milli stafa (þ.e. kerning og ligatures) er ekki mikilvægt.
Langst auðveldasta leiðin er að nota frábært ókeypis forrit á netinu sem heitir IcoMoon , eftir Keyamoon, sem tekur í burtu alla þræta um að breyta táknum inn í vefrit.
Þessi HTML5 app tekur í burtu alla sársauka við að búa til leturskrár fyrir einfaldar notkanir, svo sem að byggja upp leturgerðir á skjánum. IcoMoon kemur með fjölda táknmynda sem þegar eru hlaðnir, og þú getur bætt við fleiri í bókasafnið þitt, þar sem flestir geta verið notaðir ókeypis (athugaðu leyfisveitingar). Ef þú ert að leita að nokkuð stöðluðum táknum, svo sem "skrá niðurhal" og "innkaupakörfu" þá gætir þú fundið að nota einn af þessum er æskilegt að búa til þitt eigið.
Skref fyrir skref
1. Undirbúa myndirnar þínar
Til að byrja með þarftu að búa til táknin í vektorritunarforriti sem er fær um að flytja út í SVG sniði, svo sem Illustrator eða Inkscape.
Þó að þú ert að hanna, getur þú unnið með hvaða litum sem þú vilt, en táknin verða að vera ein solid litur. Gakktu úr skugga um að hvert tákn sé u.þ.b. sama stærð. Að hafa eitt tákn mun lengra eða lengur en annað gerir það erfitt að búa til samkvæm letur. Hér hef ég þurft að minnka breidd loftskiptatáknið mitt þannig að það passi við aðra.
2. Hreinsa upp
Athugaðu hvert táknið vandlega til að ganga úr skugga um að það hafi ekki ófullkomleika - upplýsingar sem líta vel út í smærri stærðum geta falið smá galla þegar þeir eru aðdregna inn. Í tákninu sem sýnt er hér að neðan þarf ég að fjarlægja skrýtin stíga sem hafa skrúfað inn þegar lagskiptir þættir.
Í Illustrator, nota Pathfinder tólið til að sameina skarast þætti og Minus Front frumefni til að fjarlægja útskýringar atriði, svo sem stjörnuna í þessum táknum.
Meginreglan er að tryggja að táknið þitt sé læsilegt í litlum mæli. Einfalda eins mikið og mögulegt er.
3. Flytja út í SVG
Nú skaltu velja tákn og afrita og líma það inn í nýtt fermetra skjal (til dæmis 200 × 200 punkta). Skala táknið þannig að það passi. Þú getur fundið það gagnlegt að setja grunnröðina. Litur táknið þannig að það sé solid svartur á hvítum bakgrunni.
Nú skaltu velja File… Save as og vista skrána sem SVG skrá. Notaðu sjálfgefna SVG stillingar. Þegar þú hefur gert þetta fyrir öll táknin, ertu tilbúinn til að búa til vefsíðu letur.
4. Innflutningur í IcoMoon
Opnaðu IcoMoon vefur app . Til að flytja inn táknið smellirðu á "Import icons" hnappinn og síðan velurðu SVG skrárnar sem þú vilt bæta við - þú getur bætt mörgum skrám í einu. Þessir birtast þá undir "Custom Icons þín." Ef þeir eru auðkenndir í gulum, þá munu þau vera hluti af leturgerðartákninu sem þú ætlar að búa til. Í þessu dæmi er hægt að sjá að ég hef ákveðið að flytja ekki út eina af eigin táknum mínum og ég hef bætt við einum af táknum frá "Mini-táknunum".
5. Flytjið leturgerð frá IcoMoon
Þú getur smellt á "Breyta" takkann ef þú vilt stilla stöðu táknsins, límvatn eða snúning. Notaðu "Vista afrita" hnappinn til að búa til táknbrigði (til dæmis spegilmynd af táknmynd). Bættu við merkimiðanum við táknið, því þetta verður notað til að búa til heiti klassans fyrir það.
Þegar þú ert tilbúinn skaltu smella á "Font" hnappinn neðst á skjánum til að byrja að búa til letrið. Þetta er þar sem þú getur úthlutað hvaða tákn er kortlagt í hvaða staf; til dæmis, ef táknið þitt er sex myndir af spuna bolta, þá geturðu tengt stafina q, w, e, r, t og y til sex ramma. Í stillingum, veldu leturnafn. Þú getur einnig stillt leturstærðina, en ef þú ert ekki að fara að stilla sérsniðið leturgerð við hliðina á venjulegu texta þarftu ekki að hafa áhyggjur af þessu.
6. Sækja leturskrárnar
Smelltu á "Download" til að hlaða niður leturpakkanum í tölvuna þína. Það verður undirmöppur sem inniheldur leturgerðirnar (í WOFF-, EOT- og TTF-sniði), svo og sýnishorn HTML-síðu og samsvarandi CSS. Það er jafnvel JavaScript-skrá með úrlausn ef þú þarft að styðja IE 6 eða 7.
Til að bæta leturgerðinni við verkefnið skaltu afrita leturgerðarsniðið á síðuna þína. Þú getur afritað og límt CSS frá style.css inn í CSS skrá þína á eigin vefsvæði en nálgun mín er að endurnefna hana sem fonts.css og halda því sem sérstakan CSS skrá. Þú þarft síðan að bæta við tilvísun í þessa CSS skrá í HTML skjalinu þínu með því að nota hlutfallslega tengilinn:
<link rel="stylesheet" href="fonts.css" />Í þátturinn @ font-andlitið í CSS-skránni þarftu að breyta vefslóðinni til nýju staðsetningar letursins, eða þú getur einfaldlega sleppt leturmappa í möppunni með stílblaðinu.
7. Að hringja í leturgerðina
Eins og þú sérð í sýnishorninu index.html skrá, eru tvær leiðir til að vísa til sérsniðins leturs, annaðhvort með eðli sínu (unicode eða heiti) eða með heiti þess. Fyrsta dæmið notar HTML5 gögn-táknið ástand
<div aria-hidden="true" data-icon="g"></div>Hér er fs1 bekkurinn notaður til að stilla leturstærðina. The aria-falinn tilvísun hjálpar til við að tryggja að eðli er ekki talað af neinum skjámælum.
Önnur aðferðin notar span þáttur:
<span aria-hidden="true"></span>Þessi aðferð er gagnleg þegar þú vilt að táknið sé í lagi með venjulegum texta.
Ef þú vilt gera táknið tengil, getur þú sett það allt í href :
8. Ítarleg hugmyndir
Eins og við höfum bara uppgötvað með sveima ástandinu, er að breyta lit á tákninu eins auðvelt og að setja litareiginleika í CSS okkar og að breyta stærðinni er eins auðvelt og að stilla leturstærðina. Þú getur einnig stillt aðrar eignir, svo sem textaskugga og gagnsæi, allt meðan þú heldur upplausninni sjálfstæði leturs.
Prófaðu það, og ég ábyrgist að þú munt aldrei nota punktamyndatákn aftur.
Hefur þú reynt að nota leturgerðir fyrir tákn? Hvernig hefur þú fundið það? Láttu okkur vita í athugasemdunum.