Share
La oss se på en alternativ tilnærming for å vise logoer på en nettside. Normalt vil du nærme utfordringen ved å bruke en
Først opp, et raskt ord om merkevarebygging. Visuell identitet (når det er gjort riktig) er utformet veldig grundig og veldig spesifikt. Typografi, farger, hvitt plass, varianter - ta en titt gjennom retningslinjene for bedriftens merkevarebygging av noe produkt eller firma, og du vil raskt bli oppmerksom på de små margene for tolkning.
Logoer kan ikke tilnærmet; De må reproduseres nøyaktig, og derfor er vi avhengige av bildefiler for å vise dem på nettsider.
De fleste nettsider viser en logo (som gjør at du lurer på hvorfor det er nei
eller ved å bruke en bildeutskiftingsteknikk på ankerets innhold:
logo
h1 a # logo font: 0/0 a; tekstskygge: ingen; farge: gjennomsiktig; bakgrunn: url (images_19 / din-logo-as-a-web-font-ligature.png);
Dette er greit. Markeringen sier "viktig overskrift, lenke til hjemmesiden, med indekserbare (tilgjengelig) innhold for å fortelle oss hva det handler om". CSS bytter ut innholdet for 100% visuelt nøyaktig merkevarebygging.
Men hva med spørsmålet om høy pixel tetthet skjermer. For de ovennevnte teknikkene for å jobbe i en retinaverden, må en annen høyversjon av logoet bli servert når det trengs. Eller en SVG-versjon i stedet. Begge mulighetene, men hva med vi lene på webfonter ved å designe vår egen ligatur?
Tenk på det:
For en detaljert forklaring, ta en titt på vår anatomi av webtypografi. For å oppsummere, ligaturer er målrettet utformede tegnparkombinasjoner. Hvis to tegn i en skrift ser vanskelig ut når de plasseres ved siden av hverandre (fl å være et klassisk eksempel) en ligatur kan utformes for å hjelpe. Ligaturglyfen blir deretter "kartlagt til" (knyttet til) bokstavkombinasjonen i spørsmålet. Når nettleseren møter den kombinasjonen, skifter bokstavene ut for en enkelt ligatur.
En av de mange ligaturene som er tilgjengelige fra Adobe Caslon Pro Dette prinsippet må ikke bare gjelde for brev parene enten; glyfer kan kartlegges til hele strenger.
Vår ligaturglyph skal bli en falsk applogo (kalt "Vectr", den siste vokalen er fjernet for å bevise at det er en app ...) og den skal kortlegges til strengen "Vectr".
Gjør ingen feil, IcoMoon har gjort denne prosessen enkelt. Før IcoMoon kom sammen, ville du ha behov for å bruke et skriftutformingsprogram (Inkscape's SVG font editor er en av de få måtene å gjøre dette på en rimelig måte) for å justere og kartlegge hver glyph. Da vil du lagre filen, med flaks direkte som TTF (TrueType), alternativt som SVG, hvorpå du vil konvertere til TTF ved hjelp av et annet verktøy. Deretter vil du til slutt laste opp din TTF til en webfontgenerator for å gi deg ditt endelige produkt.
Med IcoMoon er alt du trenger å gjøre, ...
Før vi starter noe, trenger vi en logo, i vektorform. Mange vektorfilformater kan åpnes og redigeres i en rekke grafikkprogrammer. Encapsulated Post Script (EPS), Post Script (PS), Portable Document Format (PDF) og Scalable Vector Graphics (SVG) er noen få vanlige eksempler for å håndtere vektorer.
Jeg bruker Adobe Illustrator i dette eksemplet, men hele prosessen kan brukes til andre applikasjoner (for eksempel Open Source Inkscape).
For det første, vær oppmerksom på din tavle. Vi utformer effektivt en skrifttyper, som under TrueType-omstendigheter vil være en firkant på 512, 1024 eller 2048 piksler. Dette er en konvensjon, ikke et krav, men vi velger 1024px for å gi oss et solidt grid på 64x16; ideell for å designe skrifttyper rundt en standardstørrelse på 16px.
Vårt glyph vil bli utgitt med hele denne tavleplaten rundt det, og definerer effektivt vår "EM" -måling.
Ved utforming av hele skrifter er det viktig å plassere alle tegnene i forhold til hverandre på dette lerretet slik at de alle sitter pent sammen på samme basislinje.
Jeg gir deg ut ...
Med vår logo plassert korrekt på tavlen, lagrer vi filen som SVG. Det er ingen stor forskjell (i forhold til våre formål) i de forskjellige SVG-innstillingene, bare gå til standardene og trykk "lagre".
Brann opp IcoMoon.io web-appen. IcoMoon (utviklet av veldig smart @Keyamoon) gjør det mulig å velge en 'miks-ikon glyphs', kart dem til tegn etter eget valg, og last ned @ font-face-pakken for bruk på nettet.
Den også lar deg laste opp dine egne glyfer (som SVG eller TTF) for å legge til i samlingen din. Importer SVG-filen vi nettopp har gjort, så sjekk den ser mer eller mindre i orden i miniatyrbildet.
Du kan plassere logoen og gjøre små endringer ved å trykke på blyantknappen og klikke på miniatyrbildet. Faktisk, i redigeringsskjermen kan du se at det er et problem med kulene på slutten av hvert håndtak i logoen.
Du ser hvor formene krysser? Vi har ikke kombinert alle våre vektorobjekter sammen riktig i Illustrator, så jeg må gå tilbake og sørge for at det er gjort riktig.
Med alt i orden, la oss bygge oss en ikon samling.
Velg hvilke ikoner du trenger, inkludert logoen din, og klikk deretter "(Generer) Font". På dette punktet får du en forhåndsvisning av hver glyph, inkludert tegnene eller unicode-enhetene de skal kartlegges til.
Du kan definere tegnene selv (hvis du vil) eller, som i vårt tilfelle, du kan definere en hel rekke tegn for å fungere som en ligatur.
Åpne oppsettmenyen og merk av for «Aktiver ligaturer». Nå kan vi legge inn en tilpasset ligaturstreng i boksen over glyphen. I vårt tilfelle, "Vectr" (og det er saksfølsomt selvsagt).
I vinduet Innstillinger kan du også velge å laste ned fonten som Base64, innebygd i CSS selv, i stedet for å sitte på serveren som separate skriftfiler. Jeg velger Base64-koding, da det sparer oss enda mer HTTP-forespørsler.
Nå når du klikker på nedlasting, blir du prydet med en fullt funksjonell demo; en HTML-fil, alle fontfiler og den medfølgende CSS.
Standard CSS gir deg muligheten til å velge alle elementer med a [Data-ikon] attributt, eller bare direkte ved hjelp av en klasse av ditt valg på elementer du vil bruke skriftfilen til. Vi er også utstyrt med en hel masse interessante typografiske CSS-regler; noen av dem er nettleserspesifikke, men alle er verdt å ta en titt på:
snakk: ingen; / * Aktiver ligatures * / -webkit-font-feature-innstillinger: "liga", "dlig"; -moz-font-feature-innstillinger: "liga = 1, dlig = 1"; -moz-font-feature-innstillinger: "liga", "dlig"; -MS-font-feature-innstillinger: "liga", "dlig"; -O-font-feature-innstillinger: "liga", "dlig"; font-feature-innstillinger: "liga", "dlig"; tekst-rendering: optimizeLegibility; font-style: normal; font-weight: normal; font variant: normal; tekst-transformasjon: ingen; linjehøyde: 1; -webkit-font-utjevning: antialiased;
Det er noen ganske eksperimentelle regler for å sikre at ligaturer blir brukt der det er mulig, så noen andre (mer standard) regler som tilbakestiller vår tekstvisning for elementene i spørsmålet. Før alt det du vil se snakk: ingen; som hindrer at innholdet blir "talt" av relevante enheter (kanskje ikke nødvendig i logos sak). Da vil du legge merke til optimizeLegibility og webkit s skrift utjevnings, all god praksis for å sikre vår typografi vises optimalt i ulike nettlesere.
Uansett, ignorerer de stilene for nå, alt vi du må gjøre er å sørge for at vårt logoelement har den nye fontfamilien som er brukt til den:
VECTR
.logo font-family: 'vectr';
Det er det! Når nettleseren vår møter et element med klassen "logo", med innholdet "Vectr", vil vår logo bli vist. Nå, gjennom CSS alene, kan vi endre størrelsen, fargen, forskjellige andre CSS-effekter og alle 100% oppløsning uavhengig.
Brace deg selv: ligaturer støttes ikke av IE9 og tidligere. Opera har også fjernet support siden versjon 10 (selv om Opera flytter til Webkit som sannsynligvis vil endre seg snart). Alle andre moderne nettlesere, inkludert mobilplattformer, spiller ball ganske bra, men du må sørge for at du har en tilbakekallingsløsning for eldre versjoner av Internet Explorer.
En måte å gjøre dette på er å bruke betingede klasser på HTML-koden din:
Disse lar deg identifisere alle versjoner av IE; alt tidligere enn IE10 her er gitt klassen lt-IE10. Du kan deretter overstyre logoen stiler i tidligere nettlesere, definere noe alternativ til webfont ligatur:
html.lt-ie10 .logo bakgrunn: noe-eller-annet-endre-the-font-familien-og-så-på;
Accentsconagua