Share
Fed-up med Arial? Lei av Times New Roman? Font-erstatning metoder har forbedret seg dramatisk de siste 2 årene, men det kan ofte være vanskelig å sortere ut de forskjellige metodene hvis du ikke leser hele tiden om det. Denne artikkelen vil diskutere ulike skriftutskiftningsteknikker som er der ute akkurat nå.
Publisert opplæringNoen få uker besøker vi noen av leserens favorittinnlegg fra hele historien til nettstedet. Denne opplæringen ble først publisert i november 2010.
Vi ser på fordeler og ulemper ved hver, spørsmålet om skriftlisenser og de beste skriftressursene på nettet, slik at du kan begynne å bruke dem i dine egne webdesign.
"Siden begynnelsen av nettet har designere blitt begrenset til et begrenset antall skrifter"
Mulighetene for design på nettet ser ut til å øke hver dag. Anvendelsen av teknologier som HTML5, CSS3 og Javascript har resultert i mange spennende og innovative webdesign. Internett ser ut til å ha kommet langt siden dagene i den eneste nettleseren som bare har tekst. Til tross for dette er det et aspekt av webdesign som har vært relativt stillestående.
Typografi og skriftvalg er integrerte elementer i ethvert designers arsenal for å skape utseendet og følelsen av et nettsted. Dessverre siden begynnelsen av nettet har designere blitt begrenset til et begrenset antall skrifter. Helvetica, Arial og Georgia er tre av de svært få tiltalende skriftene (for ikke å glemme Comic Sans) som designere trygt kan stole på for å bli vist riktig for de fleste nettbrukere.
Den tradisjonelle metoden for designere å omgå slike begrensninger og uttrykke kreativitet med fonter er å inkorporere tekst innenfor bilder - det er imidlertid mange ulemper for denne metoden. Flere tilgjengelighetsproblemer oppstår, og nettsidenes ytelse påvirkes også negativt av økt belastningstid.
Denne artikkelen vil diskutere flere forskjellige spennende metoder for å inkorporere ikke-standardfonter i websidene uten å bruke bilder. Vi vil se på fordelene og ulempene ved hver metode, problemene rundt bruken av skrifttyper og hva denne teknologien egentlig betyr for webdesignere.
Cuf? N er en utrolig enkel og effektiv metode for å inkorporere ikke-standardfonter på en nettside og en der funksjonaliteten ikke er avhengig av språk på serveren eller plugin-moduler. Cuf? N opererer utelukkende på noen få linjer med Javascript-kode og bruker kombinasjon av VML (Vector Mark-up Language), for Internet Explorer og HTML5's Canvas-funksjon for å gjengi fonter.
Cuf? N gir et font konverteringsverktøy på deres hjemmeside som vil tillate deg å konvertere din valgte font til SVG og oppretter en Javascript-fil for deg å referere i HTML. Nettuts + redaktør Jeffrey Way har tidligere skrevet en utmerket trinnvis veiledning om hvordan å integrere Cuf? N inn i nettsiden din.
Cuf? N er et populært valg for mange webdesignere på grunn av sine mange fordeler og relativt få negativer. Den manglende tillit til andre skriptspråk eller plugin-moduler betyr at den er tilgjengelig for et meget bredt publikum, og det støttes også av nyere versjoner av alle de store nettleserne, inkludert IE 9. Du kan også direkte bruke CSS styling til Cuf? N erstattet tekst, inkludert nyere CSS 3-funksjoner som gradienter. Med hensyn til fart er det mye raskere enn sIFR og mindre intensiv, men det bør fortsatt ikke brukes til store tekstkropper.
Det er imidlertid noen negative for Cuf? N. Det stoler fortsatt på Javascript for å fungere, som noen web-brukere kanskje har slått av. Skuffende Cuf? N erstattet tekst er heller ikke i stand til å bli valgt og derfor kopieres og limes inn.
Pros:
Ulemper:
"@ font-face er egentlig den ultimate løsningen for fonter på nettet."
@ font-face har sannsynligvis fått mest oppmerksomhet til noen av skriftutskriftsmetodene, men det er en veldig god grunn til dette. @ font-face er egentlig den ultimate løsningen for skrifttyper på nettet og en som alle andre håpet å replikere før den ble fullt realisert. @ font-face var faktisk inkludert i CSS2-spesifikasjonen, men det har tatt til nå for utbredt adopsjon.
@ font-face bruker ingen annen webteknologi enn CSS for å implementere egendefinerte skrifter på en nettside - dette betyr at det ikke lenger er avhengighet av Flash, PHP eller Javascript. Faktisk type gjengis når du bruker @ font-face, i stedet for vektorobjekt eller -bilder, og derfor kan teksten velges, skaleres og styles ved hjelp av CSS.
Dessverre, som i tilfelle med mange andre web-relaterte problemer, er det i hovedsak nettleserne (sammen med lisensieringsproblemer som vi vil diskutere nedenfor) som har hindret fremgangen av @ font-face. Hver av de dominerende nettleserne støtter forskjellige skriftformater. Internet Explorer bruker .EOT (Embedded Open Type) mens nyere versjoner av Firefox, Chrome, Safari og Opera alle støtter .ttf (True Type Format). Open Type Format støttes også av en blanding av nettlesere og SVG (Scalable Vector Graphics) er nødvendig for iPhone og iPad. Det kan være alt ganske forvirrende, og noen ganger kan det sette mange mennesker av å prøve å bruke den. Heldigvis er det imidlertid lys i horisonten. Web Open Font Format, eller. WOFF, er satt til å bli standardformatet for webfonter og er for tiden standardisert av W3C. Firefox har støttet formatet siden versjon 3.6, Chrome siden 5.0, og det ble nylig annonsert at Internet Explorer 9 også støtter formatet. La oss håpe Opera og Safari går snart med festet.
Det eneste andre mindre problemet med @ font-face er at fordi det presenteres som faktisk type, vil enkelte nettlesere og operativsystemer gjøre det litt annerledes. Noen web skrifttypetjenester, som vi vil diskutere videre, tar sikte på å korrigere disse svake avvikene ved hjelp av skrifttypehinting som jevner oversikten over typen i nettlesere som skaper mer estetisk tiltalende type.
Hvis du vil ha mer informasjon om hvordan du implementerer @ font-face på nettstedet ditt, har Jeffrey Way igjen gitt en nyttig opplæring om hvordan du gjør det.
Pros:
Ulemper:
De neste håndfull løsningene stole på @ font-face for å levere varene - hver av disse er en "tjeneste" mer eller mindre - noe som betyr at de alle bruker samme grunnleggende teknologi, men de tilbyr forskjellige fontbiblioteker, lisensieringsalternativer og betalingsplaner; Ja, de fleste av disse krever at du betaler for å bruke dem, men sjansen er at dette er fremtiden for alle skrifttyper på nettet.
Font ekorn er kanskje den mest populære font-erstatningsressursen for øyeblikket. Font Equirrel lindrer alle bekymringer du måtte ha om skrifttype lisenser, da alle skriftene er fritt tilgjengelige for kommersielle formål. Siden har hundrevis av skrifttyper å velge mellom, alt fra sans-serif til nyhetsstilfonter.
Som diskutert ovenfor, for å sikre @ font-face-arbeid på tvers av alle nettlesere, trenger du flere forskjellige formater for skrifttypen, og for denne Font Eekhoorn har en løsning. Nettstedet tilbyr @ font-face-sett som gir deg alle formatene du trenger, og inkluderer også HTML og CSS som trengs også. Hvis du ikke finner @ font-face-settet for skrifttypen du vil bruke, gir de også en generator som konverterer fontfilen til de flere formatene du trenger gratis. Når du bruker generatoren, må du sørge for at du har den riktige lisensen som tillater at du bruker skriften på nettstedet ditt.
Pros:
Ulemper:
Googles skrifttype-API brukes sammen med sin helt egen skriftkatalog der alle skriftene er åpen kildekode og tilgjengelig for alle å bruke. Kataloget utvides og vokser hele tiden, og har nå over 200 eksemplarer.
Det kan egentlig ikke være lettere å inkorporere fonter fra katalogen til nettstedet ditt. Du trenger bare å velge skrifttypen du ønsker å bruke, velg varianter av skrifttypen du trenger, og Google vil gi deg den ene linjen med Javascript-koden du trenger. Juster CSS for å liste fonten som er brukt, og du er klar til å gå. Det er så enkelt!
Pros:
Ulemper:
Typekit var en av de første abonnementsnettfonttjenestene, og er fortsatt svært populær. Typekit og andre lignende tjenester tar opp spørsmålet om skriftlig lisensiering ved å gi brukerne tilgang til et stort utvalg tilpassede skrifter mot et årlig abonnementsavgift. Denne metoden gjør det mulig for skriftstøtter å motta noe i retur for sitt harde arbeid, og sikrer også mot piratkopiering av skrifttyper, ettersom alle skriftene er sentralt plassert på Typekits beskyttede servere. Brukerne av tjenesten er ikke vert for skrifter på eget webområde, men kobler bare til dem.
Typekit har samlet seg sammen med noen av verdens største skriftstøperier for å tilby et bredt og varierende utvalg av skrifter som du kan bruke. Typekit gir deg mange alternativer og kontroll over skrifttypene du bruker. Velg forskjellige skriftvarianter, vekt og glyfer som skal brukes. Du kan også lage CSS-stabler og velge tilbakebetalingskonfonter som skal brukes når @ font-face ikke støttes. Du må også velge de spesifikke HTML-kodene eller CSS-klassene for å bruke den egendefinerte skrifttypen til. Når du er fornøyd med valgene du har gjort, genereres et stykke Javascript-kode for at du skal bruke på nettstedet ditt.
En annen fordel ved Typekit er at den tar sikte på å kontrollere avvikene i hvordan forskjellige nettlesere håndterer tekst og fonter ved hjelp av hinting.
Typekit tilbyr ulike prispakker som passer til ulike behov. En gratis pakke er tilgjengelig som gir deg to skrifter som kan brukes fra deres prøvebibliotek på ett nettsted. Nettstedet er tillatt opptil 25.000 sidevisninger i måneden, og du må også vise Typekit-merket på nettstedet, som lenker til informasjon om skrifttypene du bruker. I den andre enden av skalaen er ytelsespakken som gir deg tilgang til hele spekteret av skrifter som er tilgjengelige for bruk på et ubegrenset antall nettsteder uten kapp på mengden sidevisninger. Ytelsen gir alle disse funksjonene til et årlig abonnementsavgift på? 99.99.
Pros:
Ulemper:
Den populære font ressursen fonts.com har også lansert en spesialisert web skrifttype tjeneste, som har over 8000 fonter for deg å bruke på dine nettsider. På samme måte som Typekit, er det en abonnementsbasert tjeneste bortsett fra at den er priset månedlig. Sammenlignet med Typekit virker det dyrere ut, men det er langt færre restriksjoner på skriftene. Den gratis pakken sammenligner seg veldig gunstig, og gir ubegrenset tilgang til 8000 fonter, slik at du kan bruke på så mange nettsider som du ønsker. Professional-pakken gir deg også opptil 50 skrifter for å laste ned og installere på datamaskinen din for å bruke i designene dine.
Fonts.com Web Fonts har noen virkelig flotte skrifttyper som en del av samlingen - som Helvetica, Univers og Franklin Gothic.
Pros:
Ulemper:
Kjent webdesignfirma Clear Left, som har jobbet for noen av verdens største bedrifter, har slått seg sammen med OmniTI og lansert Font Deck. Font Deck er en annen abonnementsbasert tjeneste, bortsett fra at du bare betaler et årlig gebyr for hver enkelt skrift du bruker, perfekt for de som bare vil bruke en eller to fonter til sin personlige blogg.
Fontpriser starter på $ 2,50 per år per domene og får ubegrenset sidevisninger. Hele fontvalget er også tilgjengelig for å prøve gratis i lengre tid, men bare tjue unike IP-adresser vil kunne se den. Denne gratis pakken tar sikte på å kompensere for det faktum at du ikke kan laste ned skrifter til din lokale maskin og bruke dem under designfasen. Siden Font Deck er bare relativt nytt for scenen, er det ikke for øyeblikket veldig stort utvalg av skrifter å velge mellom.
Pros:
Ulemper:
Font Spring tar en litt annen tilnærming enn abonnementsbaserte tjenester og vender tilbake til den tradisjonelle måten å kjøpe fonter på. Fonter kjøpes individuelt og krever at du laster ned dem og vert for skrifter på din egen webserver. Font Spring antyder at 99,9% av de tilgjengelige skriftene kan brukes med @ font-face.
Hver enkelt skrift kan variere i pris, og du må betale en tilleggsavgift for lisensen for å bruke skrifttypen med @ font-face. @ Font-face-lisensen inneholder den skrifttype OpenType-versjonen av skrifttypen og de forskjellige formatene du må bruke den på nettet.
Det er mange fordeler med å bruke denne metoden. Hvis du virkelig har ditt hjerte satt på bare en bestemt skrift, kan det være det billigere alternativet til abonnementstjenester. Du kan bruke skriften på så mange domener som du vil, så lenge du har direkte kontroll over dem, og det er ingen grense for mengden sidevisninger..
Som en tilleggsadvarsel er du forbudt fra å konvertere eller legge inn fonten med andre teknologier som sIFR eller Cuf? N.
Pros:
Ulemper:
Dette er bare noen få av skriftstøttene tilgjengelig, det er mange flere som Typotheque og Webtype. Hver har sine egne positive og negative, og ditt valg bør være basert på dine egne personlige behov. Noen kan nyte brukervennligheten av abonnementstjeneste, mens andre kanskje ikke liker tanken om å overgi noen kontroll over deres nettsted til en tredjepart. Hvis sistnevnte er tilfelle, kan du være bedre å laste ned og hosting dine egne webfonter ved hjelp av nettsteder som Font Squirrel.
De neste to (sIFR og FLIR) er vanligvis kjent som "old school" fordi de har en god andel av problemer, men de er verdt å diskutere og vite om.
sIFR har eksistert i noen tid nå. Da det først kom ut, ga det en effektiv metode for å inkorporere ikke-standardfonter når det egentlig ikke var noe annet valg enn bilder. sIFR eller skalerbar Inman Flash Replacement bruker en kombinasjon av Flash og Javascript for å endre tekst på nettsider til et Flash-element. sIFR har mange fordeler, for eksempel teksten er tilgjengelig for skjermlesere, og at den fortsatt kan velges.
Begrepet "skalerbar" i navnet har imidlertid potensial til å forårsake forvirring. sIFR er skalerbar i den forstand at Flash-elementet skaleres til størrelsen på den opprinnelige nettleserteksten - dette gjør det mulig å vise all tekst med størst mulig størrelse innenfor en gitt dimensjon. En tekst som er erstattet med et flashelement, kan imidlertid ikke justeres når en bruker endrer tekst på en side. som åpenbart forårsaker et tilgjengelighetsproblem. sIFR krever også at både Flash og Javascript skal være aktivert på en brukers datamaskin for å fungere.
En av skaperne av sIFR, Mike Davidson, gjenkjenner også begrensningene i teknologien. Mike har åpenbart uttalt at sIFR ikke skal brukes til store tekstkropp da det har en merkbar effekt på ytelsen til nettstedet. Mike anerkjenner også at teknologien hans ikke er den endelige løsningen på typografi på nettet, og refererer til bare som en "stopgap".
Pros:
Ulemper:
FLIR eller Facelift Image Replacement ligner sIFR bortsett fra at den bruker Javascript og PHP for å generere bilder i stedet for Flash for å erstatte tekst. Denne metoden har den åpenbare fordelen at du ikke trenger å bruke tid på å lage individuelle bilder for hvert stykke tekst du vil bruke en egendefinert font for. Hvis du bestemmer deg for å bruke en annen skrift eller farge for teksten, er det også mye lettere å oppdatere teksten på nettstedet ditt.
Dessverre, i tillegg til brukervennlighet og tidsbesparende aspekt ved FLIR, gir det ikke mye forbedring i forhold til den tradisjonelle metoden for lagring av tekst som bilder. Sluttresultatet forblir fortsatt som tekst gjengitt som et bilde der teksten ikke kan velges eller skaleres.
Pros:
Ulemper:
Problemet med skrifttype lisenser er en pågående og en som har bidratt til den langsomme utviklingen og vedtakelsen av skriftutskriftsmetoder. Akkurat som med bilder, trenger du tillatelse fra forfatteren, i form av en EULA (sluttbruker lisensavtale), for å bruke en skrift på nettstedet ditt. Noen lisenser tillater fri bruk av skrifttypen, selv for kommersielle formål, mens andre bare kan tillate personlig bruk på en lokal maskin.
Når du bruker en av de skriftlige erstatningsmetodene som er diskutert ovenfor, legger du effektivt inn en skrift på nettstedet ditt, eller kobler til en som er lastet opp til webserveren din, og dette er ikke tillatt av mange, selv gratis skriftlisens. Årsaken til at mange fontskapere og støperier ikke tillater dette, er fordi det tillater at brukerne av nettstedet har direkte tilgang til skriftfilen, og de blir bekymret for at fonten deres kan lastes ned og distribueres ulovlig. Dette problemet har forhindret mange font-skapere fra å lage skrifttyper tilgjengelige for bruk med metoder som @ font-face.
Det er derfor avgjørende at når du bruker en av metodene som er diskutert ovenfor, sørger du for at skrifttillatelsen tillater det.
Heldigvis har dette problemet ikke hindret utviklingen av skriftutskriftsmetoder helt, og det er mange ressurser tilgjengelig for å tillate deg å bruke egendefinerte skrifter på nettstedet ditt.
"Perfeksjon er ikke verdt å vente på, hvis du gjør det, risikerer du å gå glipp av spennende nye muligheter"
Vi har diskutert mye over, og det er klart at det er mange alternativer tilgjengelig for de som ønsker å bruke egendefinerte skrifter i deres webdesign. Den gode nyheten er at alle disse metodene er tilgjengelige for bruk akkurat nå. Det er sant; Ingen av metodene er perfekte, hver har sine egne gode poeng og dårlige poeng. @ font-face har åpenbart det største løftet, men det vil trolig være noen år før det er helt kollisikkert. Sannheten er selv om situasjonen sjelden er perfekt i verden av webdesign, det vil alltid være kompromisser og arbeidsoppgaver som trengs for å implementere ny teknologi. Perfeksjon er ikke verdt å vente på, hvis du gjør det, risikerer du å gå glipp av spennende nye muligheter.
Dette er virkelig en spennende tid for webdesign, og det ser ut til å være en voksende forståelse og forståelse av typografi på nettet. Font utskiftningsmetoder gir en flott mulighet til å skape nyskapende nye design, og jeg tror at nøkkelen ikke er å misbruke denne teknologien. Gi alltid tilbakebetalinger for når ting går galt og bruk hver metode fornuftig (ikke endre alle tekst på nettstedet ditt til dette). Ta deg tid til å sette pris på og lære om flott type og nettet vil være et bedre sted for det.
Har du egne tanker om dette? Har du et spørsmål? Hvis vi savnet noen av dine favorittmetoder, legger du dem under i kommentarfeltet, og vi vil være sikker på å inkludere dem i dette innlegget!
Accentsconagua