¬ †
Hvis du kjører et nettsted på en Linux Web server, kan du være å spre noen proprietær programvare der du minst venter det: i stedets skrifter. Enda verre, du er unødvendig begrenser din design til en ganske restriktiv sett skrifttyper som bare er utbredt fordi alle andre bruker dem. Heldigvis er det en enkel problem å fikse. Denne helgen kan du vinke farvel til kjedelig valg som Helvetica og vise frem noen kvalitet åpen kildekode-fonter alt i ett trekk.
Tror ikke det? Prøv dette enkle eksperimentet. Ta opp standard sidens CSS stilark (hvis du arbeider eksternt, bruker Vis kilde i nettleseren din, og deretter finne den < link > tag med rel = "stylesheet" egenskap). Så se etter den font-family: eiendom, Ai oddsen er at du vil finne flere av de "Web-safe skrifter" spesifisert: Arial, Courier, Verdana, Georgia, Tahoma, Trebuchet, etc. Disse ansiktene er vanlig på Windows og Apple plattformer, spesielt fordi selskapene har en lisensavtale for å pre-installere dem. Linux-brukere har dem ikke er forhåndsinstallert, skjønt, og lisensene er proprietær og svært restriktive.
Du kan ikke regne med at alle skal ha åpne fonter som Liberation og Deja Vu forhåndsinstallert, så rett og slett spesifisere font-family: Liberation vil ikke gjøre triks. Men alle de aktuelle nettlesere støtter linking fontfiler inni HTML akkurat som bilder eller annet sideinnhold. For å gjøre dette må du først navngi skrift med en @ font-face CSS definisjon, for eksempel:
@ font-face {font-family: MysiteBodyCopy; src: url (/media/fonts/bodycopy.ttf) format ("Truetype");} ¬ †
Så uansett hvor du trenger å angi font bruk, du referere til den i en CSS-regel bare som du ville en av de Web-safe fonter, f.eks p.body {font-family: MysiteBodyCopy, Helvetica, Arial, sans-serif; }. Den eneste rynke er at leseren må kunne hente bodycopy.ttf font fil fra serveren din, siden vi ikke stole på leserens system allerede har det installert
Komme i gang:. Ekstern Hosting
Du kan sikkert vert TrueType- eller Opentype-filer fra en åpen font på din egen webserver, men hvis du bare dyppe tåa i vannet kan du også prøve ut en av flere offentlig tilgjengelige åpne Web skrift tjenester . Den mest kjente i øyeblikket er Google Font Directory, som serverer nesten 100 fonter lisensiert i henhold til enten SIL Åpne Font License eller Apache License. I motsetning til de proprietære tjenester fra kommersielle typen støperier, trenger du ikke å betale for å bruke tjenesten eller forespørsel og API-nøkkel for å få tilgang til det.
Google Font Directory wraps en lett API rundt sin skrift service, noe som forenkler det du trenger å gjøre for å innlemme skriftene på siden din. I stedet for den @ font-face definisjon trinn beskrevet ovenfor, trenger du bare å like å katalogens stil som passerer det navnet på skriften du ønsker å bruke. Koblingen formatet er < link rel = "stylesheet" type = "text /css" href = "http://fonts.googleapis.com/css?family=TheNameOfTheFontYouWant" > ... Så, familie = Cantarell eller familie = Gruppo
Hvis du trenger å bruke flere skrifter fra biblioteket, kan du konsolidere dem i en referanse med røret karakter. Familie = Bentham | Arimo | Kristi. Hvis skriftnavnet inneholder et mellomrom, erstatte et pluss-tegn i API-kall: familie = Droid + Serif. Noen av skriftene har varianter med forskjellige vekter og stiler, som du kan be om ved å legge dem med et kolon: familie = Anonym + Pro. Kursiv, bolditalic
Med din API forespørsel på plass, bare referere til skrift familie i CSS-regel som før. For eksempel h4 {font-family: Inconsolata; } I et stilark, eller < div style = "Inconsolata" > som en innebygd stil.
CMS og Web Work Support
"Det er grei nok hvis du bygger alle sidene dine for hånd," kan du si, "men dette er det 21. århundre, Ai hvem gjør det? " Vel, har du flaks. Et økende antall av åpen kildekode innhold styringssystemer og app rammer legger til støtte for tjenesten.
Wordpress har flere Google Font Directory plugins tilgjengelig. Den mest populære i dag synes å være WP Google Skrifter. Når den er installert, lar plugin deg tilordne skrifter fra katalogen til deg stedets CSS-regler, Ai uavhengig av hvilket tema du bruker, AI gjennom en enkel avkrysnings grensesnitt i administrasjonspanelet. Hvis for noe grunn du ikke finner denne plugin til din smak, er det andre. For eksempel inneholder Jeff Sebring er Google Web Fonts plugin mye samme funksjonalitet med et annet grensesnitt, og legger en fane til Utseende panel.
Drupal CMS har også flere alternativer. Google Font-modulen støtter bare Google Font Directory, mens Google Webfont Loader API modul fusjonerer støtte for Google-tjenesten, den kommersielle alternativ Typekit, og selv hosting dine egne skrifter, alt til en enhetlig designverktøy. Sist men ikke minst, jovially-heter @ font-your-face-modulen tilbyr støtte for web fonter vert på noen server, Googles eller på annen måte.
Joomla administratorene har to alternativer også. Den HD-Gfonts forlengelse er den enkle, Google Font Directory-eneste alternativet. Phoca Font Systemet består av to deler: Plugin og Component. Sammen legger de støtte for Google Font Directory samt andre Web skriftkilder eller lokalt vertskap fonter.
En Google Font Directory forlengelse finnes for åpen kildekode TYPO3 blogging plattform også. Kalt Google Web Font Loader, inkorporerer det Googles Javascript-basert WebFont Loader bibliotek, som gir deg litt mer kontroll enn den rå API ved å tillate erstatninger og viser tekst i en midlertidig font mens eksternt-hosted Web font belastninger.
< p> I øyeblikket de er de eneste Web programpakker med støtte for Google Font Directory eller andre Web font hosting systemer, AI i det minste at jeg har vært i stand til å oppdage. Hvis du vet om en, kan du legge igjen en kommentar. Forhåpentligvis andre tekst-tunge programmer (for eksempel diskusjonsfora og wiki-programvaren) er snart å følge; disse områdene innebærer mye lesing for besøkende, så det ville være hyggelig å behandle dem til bedre skrifter.
At rammen nivå, er det også begynnelsen på støtte. Ruby on Rails utviklere kan slå til Jon Canady sin Google Font Rails Helper, men på dette nivået med API direkte er neppe noe mer arbeid.
Applications
De ovennevnte plugins og moduler gjør kort prosess med koble til Web fonter på en live-området, men mens du utvikler du kanskje trenger å teste med et annet sett med verktøy. Google Font Directory har en forhåndsvisning verktøy som du skriver i sample test og gjengi den lever i nettleseren i noen støttede font, komplett med CSS. Men det vinduet med tekst vil ikke hjelpe deg å velge en skrifttype for ditt eget nettsted.
Firefox-brukere kan forhåndsvise alle nettsteder i et Google Font Directory font med Webfonts Previewer add-on. Dette er klassifisert som en "eksperimentell" add-on, så du må aktivere eksperimentell add-on støtte for å installere den.
Chrome-brukere kan installere lignende Google Font Previewer for Chrome-utvidelsen. Denne utvidelsen, i motsetning til Firefox add-on, gjelder den valgte skrift til hele siden, men på den annen side er det ikke tilbyr mer kontroll over skriftstørrelse, stil og vekt.
er Safari-brukere ikke utelatt helt enten: Julio Di Nicola Google Fonts i Safari forlengelse skaper en verktøylinje som lar deg til å klikke og bruke noen av Google Font Directory skrifter til et nettsted
Det er en åpen kildekode Webdesign app med eksplisitt støtte. for å bygge sider ved hjelp av Google Font Directory: BlueGriffon. BlueGriffon er en XUL applikasjon (slik at den bruker Mozilla kode under panseret). Som et resultat, er det støtte for dette Web fontfunksjonalitet gitt gjennom en Firefox-aktig XPI add-on
Extra Credit:. Spesialverktøy Andre samlinger og
Vi har diskutert Google Font katalogen først og fremst fordi det er en av de største samlingene av åpne fonter på nettet, og fordi det gir en grei API, men det er på ingen måte det eneste alternativet. The Open Font Bibliotek, for eksempel, fokuserer på skrift utvikling og samarbeid, men du kan bruke noen av sine skrifter som @ font-face -bundne Web font også.
Det er noen alternative tilnærminger til Web skrifter som du kanskje ønsker å utforske, for eksempel Typeface.js, en Javascript-bibliotek som laster Web-vert skrifter. Denne tilnærmingen gjør det mulig å støtte Web skrifter på eldre nettlesere (eller nettlesere begrenset på andre måter) som ikke støtter CSS font linking.
Skriv Select er en mer robust rammeverk bygget rundt Typeface.js, men ved hjelp av jQuery. Hvis du ønsker å gå veldig langt ut, er Cufon et webbasert verktøy som konverterer Truetype og Opentype-skrifter on-the-fly inn i den lite kjente W3C Vector Markup Language (VML), og serverer dem opp til leseren å bruke JSON. Hvorfor i all verden skulle du noen gang trenger å gå til at problemer? Hvis du er en webutvikler, kan du sikkert gjette på en prøve: å skohorn til støtte for Internet Explorer. Men la oss ikke tenke på det for lenge, Ai det er helg, tross alt. Anmeldelser
Next Page:Linux Kernel Module Management 101