Sådan konverteres dine ikoner til en web skrifttype
Jeg havde lavet nogle pæne ikoner til et website redesign, jeg lavede, og jeg forhåndsvisede det nye websted på en gammel iPad. Layoutet kiggede OK i normal størrelse, men indså i en del af siden, jeg så pludselig, at mit ikon var et uklart rod, mens den tekstbaserede overskrift stadig var skarp og skarp. På en nyere Retina-display iPad ser ikke ikonerne ret skarpe ud, selv ved normal størrelse.
Den første idé, jeg havde, var at oprette dobbeltspirerede sprite-billeder, så de blev vist til halvdelen af deres størrelse ved hjælp af CSS. Selvom dette gjorde dem til at se bedre ud på en retina-skærm i normal størrelse, så snart du begyndte at klemme og zoome, vendte blørheden tilbage. Men teksten var stadig så skarp og pinskarp.
Svaret var indlysende. Jeg havde brug for at gøre mine ikoner til en skrifttype.
I denne tutorial vil vi se på, hvordan du omdanner vektorikoner til en web skrifttype ved hjælp af en fantastisk gratis webapp kaldet IcoMoon. Så ser vi på, hvordan du bruger de genererede skrifttypefiler og CSS på en webside.
Fordelene ved at bruge en ikon skrifttype
En ikon skrifttype har flere fordele i forhold til bitmap billeder, ud over billedskarphed.
- Egnethed: En ikon skrifttype vil være meget mindre i filstørrelse end en række billeder, især hvis du har brugt dobbelt størrelse billeder til nethinden skærme. Og når først skrifttyperne er indlæst, vil dine ikoner blive gjort øjeblikkeligt, uden at du behøver at hente et billede.
- Skalerbarhed: Et ikon skrifttype kan indstilles til enhver størrelse ved at indstille
font-sizeejendom i den medfølgende CSS. Dette giver dig mulighed for at eksperimentere med forskellige størrelser; mens der for bitmap-billeder skal udskrives en billedfil i hver størrelse. - Fleksibilitet: Teksteffekter kan nemt anvendes på dit ikon, herunder farver, drop shadows og rollover states. De vil også vise godt mod enhver farve eller billed baggrund.
- Kompatibilitet: Web skrifttyper understøttes af alle moderne browsere, og gamle browsere også, selv IE 6 og tidligere.
Så lad os komme i gang!
Oprettelse af en ikon skrifttype
Symbol skrifttyper kan bygges ved hjælp af en dedikeret skrifttypeskabning app som Glyffer , men et professionelt typografiværktøj ligger langt ud over behovene eller kravene til at opbygge et simpelt ikonfonte, hvor forholdet mellem tegn (dvs. kerning og ligaturer) ikke er vigtigt.
Langt den nemmeste måde er at bruge en stor gratis online app kaldet IcoMoon , af Keyamoon, som fjerner alt det besvær, der er ved at konvertere symboler til en web skrifttype.
Denne HTML5-app fjerner al den smerte, der er forbundet med at oprette skrifttypefiler til simple anvendelser som f.eks. Bygning ikonfonte. IcoMoon leveres med et antal ikonsæt, der allerede er indlæst, og du kan tilføje flere til dit bibliotek, hvoraf de fleste kan bruges gratis (se licens). Hvis du leder efter temmelig standard ikoner, som f.eks. "Fil download" og "indkøbskurv", kan du finde ud af at bruge en af disse er at foretrække for at lave din egen.
Trin for trin
1. Forbered dine illustrationer
Til at begynde med skal du oprette ikonerne i et vektor tegneprogram, der kan eksportere til SVG-format, f.eks. Illustrator eller Inkscape.
Mens du designer, kan du arbejde med uanset farver, du kan lide, men ikonerne skal være en solid farve. Sørg for, at hvert ikon er omtrent den samme størrelse. At have et ikon meget længere eller længere end et andet vil gøre det svært at opbygge en ensartet skrifttype. Her har jeg været nødt til at reducere bredden af mit luftskibsikon, så det passer til de andre.
2. Ryd op
Kontroller hvert ikon omhyggeligt for at sikre, at det ikke har ufuldkommenheder - detaljer, der ser OK ud i mindre størrelser, kan skjule små defekter, når de zoomes ind. I ikonet vist nedenfor skal jeg fjerne de skråstregede trin, der har skubbet ind, når lagdelingselementer.
I Illustrator skal du bruge Pathfinder-værktøjet til at forene overlappende elementer og elementet Minus Front for at fjerne udskæringselementer, som f.eks. Stjernen i disse ikoner.
Nøgleprincippet er at sikre, at dit ikon kan læses på små skalaer. Forenkle så meget som muligt.
3. Eksporter til SVG
Vælg nu et ikon, og kopier og indsæt det i et nyt firkantet dokument (for eksempel 200 × 200 pixel). Skal ikonet, så det passer. Du kan finde det nyttigt at indstille en baseline lineal. Farve ikonet, så det er solidt sort på en hvid baggrund.
Vælg nu File… Save as og gem filen som en SVG-fil. Brug standard SVG-indstillinger. Når du har gjort dette for alle ikoner, er du klar til at oprette en web skrifttype.
4. Import til IcoMoon
Åbn IcoMoon web app . For at importere et ikon skal du klikke på knappen "Import ikoner" og derefter vælge de SVG-filer, du vil tilføje. Du kan tilføje flere filer på én gang. Disse vil så blive vist under "Dine brugerdefinerede ikoner." Hvis de er markeret med gule, vil de være en del af ikonfonten, du vil oprette. I dette eksempel kan du se, at jeg har besluttet ikke at eksportere et af mine egne ikoner, og jeg har tilføjet et af ikonerne fra "Mini-ikonerne".
5. Udfør skrifttype fra IcoMoon
Du kan klikke på "Rediger" -knappen, hvis du ønsker at justere ikonets position, dimensionering eller rotation. Brug knappen "Gem kopi" til at oprette ikonvariationer (for eksempel et spejlbillede af et ikon). Tilføj et meningsfuldt tag til ikonet, fordi dette vil blive brugt til at generere klassenavnet til det.
Når du er klar, skal du klikke på knappen "Font" nederst på skærmen for at begynde at generere skrifttypen. Her kan du tildele hvilket ikon der er kortlagt til hvilket tegn; For eksempel, hvis dit ikonindstilling er seks billeder af en spindingskugle, kan du tildele tegnene q, w, e, r, t og y til de seks rammer. Vælg en skrifttypenavn i præferencerne. Du kan også justere skrifttypens beregninger, men medmindre du skal angive din brugerdefinerede skrifttype sammen med standardtekst, behøver du ikke at bekymre dig om det her.
6. Download fontfilerne
Klik på "Download" for at hente skrifttypepakken til din maskine. Det vil være en undermappe, der indeholder skrifttyperne selv (i WOFF, EOT og TTF formater), samt en sample HTML-side og den tilsvarende CSS. Der er endda en JavaScript-fil med en løsning, hvis du har brug for at understøtte IE 6 eller 7.
For at tilføje skrifttyper til dit projekt, skal du kopiere skrifttypens undermappe til dit websted. Du kan kopiere og indsætte CSS fra style.css til dit eget websteds CSS-fil, men min tilgang er at omdøbe den som fonts.css og holde den som en separat CSS-fil. Du skal derefter tilføje en henvisning til denne CSS-fil i din HTML-fil ved hjælp af det relative link:
<link rel="stylesheet" href="fonts.css" />I elementet @ font-face i CSS-filen skal du ændre URL-referencen til den nye relative placering af skrifttyperne, eller du kan simpelthen droppe skrifttyper-mappen i din stilarkmappe.
7. Opkald til skrifttypen
Som du kan se i sample index.html filen, er der to måder at henvise til den brugerdefinerede skrifttype på, enten ved dens tegn (unicode eller navn) eller ved navn på klassen. Det første eksempel bruger tilstanden HTML5 data-ikon
<div aria-hidden="true" data-icon="g"></div>Her bruges fs1- klassen til at indstille skrifttypens størrelse. Den aria-skjulte reference hjælper med at sikre, at tegnet ikke taler af nogen skærmlæsere.
Den anden metode bruger et spændingselement:
<span aria-hidden="true"></span>Denne metode er nyttig, når du vil have symbolet til at sidde inline med normal tekst.
Hvis du vil gøre ikonet et link, kan du indpakke det hele i en href :
8. Avancerede ideer
Som vi lige har opdaget med hover-tilstanden, er det lige så nemt at ændre ikonets farve som at indstille farveegenskaben i vores CSS, og at ændre størrelsen er lige så nem som at indstille egenskaben for skrifttypestørrelse. Du kan også indstille andre egenskaber, som f.eks. Tekstskygge og gennemsigtighed, alt sammen samtidig med at du beholder opløsningens uafhængighed af en skrifttype.
Prøv det, og jeg garanterer, at du aldrig vil bruge bitmap-ikoner igen.
Har du forsøgt at bruge skrifttyper til ikoner? Hvordan har du fundet det? Lad os vide i kommentarerne.