Share
Innen de siste fem årene har typografi på nettet tatt ganske mye om ansiktet (beklager, ordspill ment). Det pleide å være at webdesignere var tvunget til å bruke bare websikre skrifter; system skrifttyper tilgjengelig på alle brukernes datamaskiner. Som du kan forestille deg (eller opplevd førstehånds), var dette frustrerende for oss skrive freaks, men vi tok oss av det. Men på en merkelig måte var det ganske bra fordi du hadde et begrenset sett med skrifttyper å velge mellom, slik at tiden for å plukke den perfekte skrift var minimal (jeg klager ikke). Nå skjønner imidlertid en skrift som er spesifikk for utseendet du vil oppnå, og bedrifter kan nå projisere sitt visuelle merkespråk gjennom typografi.
Så kom noen metoder for å tjene typen til våre nettsider, den mest brukte er @ font-face. Denne CSS-regelen gir oss muligheten til å laste ned skrifter fra en server og bruke dem på våre fantastiske nettsider. I starten var nettleserstøtten minimal, men den støttes nå mye. Det eneste bemerkelsesverdige unntaket er Opera Mini (c'mon gutter).
@ font-face er en CSS-regel som angir navnet på skrifttypen, plasseringen og skrifttypen. I det forenklede eksemplet nedenfor blir fonten lagret på font-face.com og den bestemte banen er definert. Det kan se slik ut:
Accentsconagua
@ font-face font-family: 'DeliciousRoman'; src: url ('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); font-vekt: 400; Du kan se at navnet på skriften er satt til "DeliciousRoman". Dette er skrifttypenavnet som vil bli referert i vår CSS-fontstabel, sammen med fallback-skrifter hvis skrifttypen ikke lastes:
.eksempel font-family: 'DeliciousRoman', Arial, sans-serif;
Men ting er ikke helt så enkelt. Siden ulike nettlesere krever forskjellige skriftformater, må vi være sikre på at vi gir alle de alternativene som trengs.
Her er en liste over nettlesere sammen med filtyper de støtter:
Det har vært flere forskjellige konvensjoner innen @ font-face for å løse problemet med nettleserkompatibilitet. Det er godt å vite hvordan @ font-face har utviklet seg, og følgende raske historie gir koblinger til en solid mengde lesing om emnet.
Paul Irish opprinnelig kom opp med Bulletproof @ font-face syntaxen i 2009. I løpet av årene har noen hackere vist seg å løse problemet med nettleserkompatibilitet, den mest kontroversielle å være smiley face hack.
En annen versjon kom ut kalt Mo 'Bulletproofer Syntaxen av Richard Fink, adressering av skriftproblemer som skjedde i Android.
Endelig har vi kommet til FontSpring @ font-face syntaksen. Denne tilnærmingen forenkler mye av språket og ser ut som:
@ font-face font-family: 'DeliciousRoman'; src: url ('fonter / DeliciousRoman-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonter / DeliciousRoman-webfont.woff') format ('woff'), url DeliciousRoman-webfont.ttf ') format (' truetype '), format for url (' fonter / DeliciousRoman-webfont.svg # svgDeliciousRoman ') (' svg '); I eksemplet ovenfor kan du se at skrifttypene er selvbehandlede og lagres på serveren i en mappe som heter "fonter".
Font Ekorre (og noen andre) gir en praktisk webfontgenerator som konverterer hvilken som helst skrift til et sett med webfiler for innbygging. Inkludert i pakken finner du alle de nødvendige skriftfiler, den spesifikke @ font-face CSS-syntaksen og en HTML-demo. Du kan deretter plassere skriftfiler direkte på serveren din og justere banen i @ font-face CSS.
Merk: Riktig advarsel skjønt, pass på at du har tilstrekkelige rettigheter til å bruke skrifter du kjører gjennom generatoren og bruk på nettstedet ditt.
Avhengig av om du selv er vert for eller bruker en fonttjeneste som Typekit (mer om dette senere), vil CSS'en se litt annerledes ut. For eksempel, med en tjeneste som Typekit, lager du, vel, "kits" av skrifter som inneholder alle skrifter du vil bruke for hvert bestemt nettsted. For hvert sett du lager, får du en JavaScript-kodestykke å plassere i av HTML-dokumentet ditt. Denne utklippet laster de riktige @ font-face-reglene for den bestemte nettleseren.
For mer om hvorfor TypeKit bruker JavaScript, les Better web font loading med JavaScript.
I kit-innstillingene fonts.com tilbyr du tre forskjellige publiseringsalternativer med premium planmedlemskap. I tillegg til et javascript-alternativ som ligner Typekit, tilbyr de også et ikke-JavaScript-alternativ som kobler til et servert stilark og et selvstendig vertskap. Avhengig av hva du velger, vil din CSS åpenbart se litt annerledes ut.
Som du kan forestille deg, blir skriftlisensiering et stort problem når du bruker fonter på nettet. Den utbredte bruken av @ font-face har ført til ganske eksplosjonen av gratis skrifttyper, hvorav noen er veldig gode, hvorav noen ikke er. Font ekorre, Fontex og DaFont er et par av de bedre kjente alternativene for gratis skrifttyper. Lost Type Coop er et annet flott sted å plukke opp skrifter, godkjente donasjoner. Google Fonts tilbyr også et stort utvalg av gratis skrifter, men etter min mening er noen av dårlig kvalitet.
Font hosting bransjen har vokst med sprang i løpet av de siste par årene. Font hosting lar deg lisensiere noen av dine favorittfonter - og i mange tilfeller bedre kvalitet enn gratis skrifter - for bruk på nettet. Typekit var en av de første store spillerne i dette markedet og har et veldig fint utvalg av skrifter. Over tid har de lagt til noen bedre kjente fonter som Futura og Meta, og har gjort flere skrifttyper kjent i webverdenen.
Fonts.com tilbyr lisensiering for sitt bibliotek med over 150.000 fonter som inneholder noen av de mest populære skrifttyper i verden som Avenir, Frutiger, Univers og Din for å nevne noen. Denne tjenesten har et par unike funksjoner som jeg liker mye: Avhengig av hvilket nivå medlemskap du har, integrerer det SkyFonts, som i utgangspunktet gir deg muligheten til å "leie" skrifter for en tidsperiode, oftest i løpet av ett eller tretti dager. Dette lar deg bruke skrifttypen i stasjonære applikasjoner for mockup-formål. I tillegg, med et premium-medlemskap, kan du laste ned skrifttypesettet og selvtilliten din egen skrifter, økende belastningstider.
En av de splitter nye tjenestene som nylig har forårsaket ganske røre, er HF & Js lansering av skyttypografi. HF og J er allment ansett å være autoritet på typografi, og deres skrifttyper lever opp til det omdømme. Et netttilbud fra disse fellows har lenge ventet som de redesignet hver av deres skrifter for skjermen. De har ganske mye hevet baren, noe som gjør 9pt. Gotham leses på skjermen. Det er virkelig fantastisk.
De har et greit grensesnitt fullpakket med morderegenskaper, som å velge bare tegnene i en skrifttype du trenger, noe som igjen sparer plass og øker belastningstiden. Absolutt verdt å sjekke ut.
Prisstrukturen for font hosting-tjenester varierer, men de fleste er basert på sidevisninger for hvert nettsted du bruker skrifter på. I tillegg til dette har mange tjenester som fonts.com forskjellige prisnivåer som tilbyr forskjellige tilleggsprogrammer, for eksempel skrivebordsfonter, mock-up fonter og self hosting-alternativer. Det er best å se hva som er tilgjengelig, og velg tjenesten og planen som passer dine behov.
Så er det bedre å bruke en font hosting service eller til selvverten? Vel, det avhenger av det. Her er noen fordeler av hver:
Hosting Service (som TypeKit, Fonts.com, HF & J)
Self Hosting
Det bør bemerkes at du må være klar over hvor mange skrifter du bruker. Når det gjelder ytelse, betyr flere vekter av samme skrifttype at du laster inn en annen hel skrifttype, så vær forsiktig som de flere skriftene du bruker, jo lengre belastningstid. Du vil angi noen alarmer på TypeKit når settet ditt er over 500k, men mindre er mer i dette tilfellet.
Godt gjort, du er nå utdannet på grunnleggende @ font-face og på mange måter det kan brukes! Pass på å følge med med de nye verktøyene og metodene for å integrere fonter på nettet, som med alt på nettet, endres det raskt!
