Share
Fed-up med Arial? Trött på Times New Roman? Font-ersättningsmetoder har förbättrats dramatiskt de senaste 2 åren, men det kan ofta vara svårt att sortera ut de olika metoderna om du inte ständigt läser om det. Denna artikel kommer att diskutera olika typsnitt ersättning tekniker som finns där ute just nu.
Publicerad handledningVarje par veckor besöker vi några av våra läsares favoritinlägg från hela webbplatsens historia. Denna handledning publicerades först i november 2010.
Vi ser på fördelarna och nackdelarna med var och en, frågan om typsnittstillstånd och de bästa fontresurserna på webben så att du kan börja använda dem i dina egna webbdesigner.
"Från början av webben har designers varit begränsade till ett begränsat antal teckensnitt"
Möjligheterna att designa på webben verkar öka dag för dag. Tillämpningen av tekniker som HTML5, CSS3 och Javascript har resulterat i många spännande och innovativa webbdesigner. Nätverket verkar ha kommit långt sedan dagarna i den enda webbläsaren för text. Trots detta finns en aspekt av webbdesign som har varit relativt stillastående.
Typografi och teckensnittsval är integrerade inslag i någon designers arsenal för att skapa utseendet och känslan av en webbplats. Olyckligtvis sedan början av webben har designers varit begränsade till ett begränsat antal teckensnitt. Helvetica, Arial och Georgia är tre av de mycket få tilltalande teckensnitt (för att inte glömma Comic Sans) som designers säkert kan förlita sig på att visas korrekt för de flesta webanvändare.
Den traditionella metoden för designers att kringgå sådana begränsningar och uttrycka kreativitet med teckensnitt är att införliva text inom bilder - det finns dock många nackdelar med denna metod. Flera tillgänglighetsproblem uppstår och webbplatsens prestanda påverkas också negativt med ökade laddningstider.
Denna artikel kommer att diskutera flera olika spännande metoder för att integrera icke-standardiserade teckensnitt i dina webbsidor utan att använda bilder. Vi kommer att titta på fördelarna och nackdelarna med varje metod, problemen kring användandet av teckensnitt och vad den här tekniken verkligen betyder för webbdesigners.
Cuf? N är en otroligt enkel och effektiv metod för att integrera icke-standardiserade teckensnitt på en webbsida och en där dess funktionalitet inte är beroende av språk på serverns sida eller plugin-program. Cuf? N fungerar endast på några rader med Javascript-kod och använder kombinationen av VML (Vector Mark-up Language), för Internet Explorer och HTML5s kanfasfunktion för att göra teckensnitt.
Cuf? N tillhandahåller ett teckensnitt konverteringsverktyg på deras hemsida som gör att du kan konvertera ditt valda teckensnitt till SVG och skapar en Javascript-fil för att du ska referera i din HTML. Webuts + redaktör Jeffrey Way har tidigare skrivit en utmärkt steg-för-steg-handledning om hur man integrerar Cuf? N i din webbsida.
Cuf? N är ett populärt val för många webbdesigners på grund av dess många fördelar och relativt få negativ. Dess otillit på andra skriptspråk eller plugin-moduler betyder att den är tillgänglig för en mycket bred publik och stöds också av senaste versioner av alla större webbläsare, inklusive IE 9. Du kan också direkt applicera CSS-styling till Cuf text, inklusive nyare CSS 3-funktioner som gradienter. När det gäller hastighet är det mycket snabbare än sIFR och mindre intensiv, men det borde fortfarande inte användas för stora textkroppar.
Det finns dock några negativa konsekvenser för Cuf. Det är fortfarande beroende av att Javascript ska fungera, vilket vissa webbanvändare kanske har stängt av. Skrämmande Cuf? N ersatt text kan inte heller väljas och kopieras och klistras därför.
Fördelar:
Nackdelar:
"@ font-face är i grunden den ultimata lösningen för teckensnitt på webben."
@ font-face har förmodligen fått mest uppmärksamhet vid någon typ av typsnitt, men det finns en mycket bra anledning till detta. @ font-face är i grunden den ultimata lösningen för teckensnitt på webben och en där alla andra hoppades replikera innan det blev fullt realiserat. @ font-face var faktiskt inkluderat i CSS2-specifikationen, men det har hittills tagit för omfattande adoption.
@ font-face använder ingen annan webbteknologi än CSS för att implementera anpassade teckensnitt på en webbsida - det betyder att det inte längre är ett lita på Flash, PHP eller till och med Javascript. Faktisk typ görs när man använder @ font-face, istället för vektorobjekt eller bilder, och därför kan texten väljas, skalas och formas med CSS.
Tyvärr är det, som det är fallet med många andra webbrelaterade problem, framförallt webbläsare (tillsammans med licensieringsfrågor som vi kommer att diskutera nedan) som har hindrat utvecklingen av @ font-face. Alla dominerande webbläsare stöder olika typsnitt. Internet Explorer använder .EOT (Embedded Open Type) medan senaste versioner av Firefox, Chrome, Safari och Opera alla stödjer .ttf (True Type Format). Öppet typformat stöds också av en blandning av webbläsare och SVG (skalbar vektorgrafik) behövs för iPhone och iPad. Det kan vara allt ganska förvirrande och ibland kan det sätta många människor utanför att försöka använda den. Tack och lov är det dock ljus i horisonten. Web Open Font Format, eller .WOFF, är inställt på att bli standardformatet för webbfonter och standardiseras för närvarande av W3C. Firefox har stödt formatet sedan version 3.6, Chrome sedan 5.0 och det meddelades nyligen att Internet Explorer 9 också stöder formatet. Låt oss hoppas att Opera och Safari snart kommer med festen.
Den enda andra mindre problemet med @ font-face är att eftersom den presenteras som den verkliga typen, kommer alla enskilda webbläsare och operativsystem att göra det något annorlunda. Vissa webbtypstjänster, som vi kommer att diskutera ytterligare, syftar till att korrigera dessa små avvikelser med hjälp av typsnittslinkning, vilket släpper ut kontur av typ i webbläsare som skapar mer estetiskt tilltalande typ.
Om du vill ha mer information om hur du implementerar @ font-face på din webbplats, har Jeffrey Way återigen gett en användbar handledning om hur man gör det.
Fördelar:
Nackdelar:
Nästa handfulla lösningar är beroende av @ font-face för att leverera varorna - var och en av dem är en "service" mer eller mindre - vilket betyder att de alla använder samma grundläggande teknik, men de erbjuder olika fontbibliotek, licensalternativ och betalningsplaner Ja, de flesta av dem kräver att du betalar för att använda dem, men chansen är att det här är framtidsvägen för alla teckensnitt på webben.
Font Ekorre är kanske den mest populära font-ersättningsresursen för tillfället. Font Ekorre lindrar eventuell oro du kan ha om typsnittslicenser, eftersom alla de angivna tecknen är fritt tillgängliga för kommersiella ändamål. Webbplatsen har hundratals typsnitt att välja mellan, allt från sans-serif till nyhetsstil typsnitt.
Såsom diskuterats ovan, för att säkerställa @ font-face-verk över alla webbläsare, behöver du flera olika format på teckensnittet och för denna typsnittets ekorre har en lösning. Webbplatsen erbjuder @ font-face-kit som ger dig alla de format du behöver och innehåller också HTML och CSS som behövs också. Om du inte hittar @ font-face-paketet för teckensnittet du vill använda, tillhandahåller de också en generator som konverterar din typsnittfil till de flera format som du behöver gratis. När du använder generatorn måste du se till att du har rätt licens som tillåter dig att använda teckensnittet på din webbplats.
Fördelar:
Nackdelar:
Googles teckensnitt API används tillsammans med sin egen typsnittskatalog där alla teckensnitt är öppen källkod och tillgänglig för alla att använda. Kataloget expanderar och växer hela tiden, för närvarande boende över 200 exempel.
Det kan verkligen inte vara lättare att införliva teckensnitt från katalogen till din webbplats. Du behöver helt enkelt välja det teckensnitt du vill använda, välj varianter av teckensnittet du behöver och Google ger dig den enda raden av Javascript-kod du behöver. Justera din CSS för att lista den använda teckensnittet och du är redo att gå. Det är verkligen så enkelt!
Fördelar:
Nackdelar:
Typekit var en av de första prenumerationstjänsterna och är fortfarande mycket populär. Typekit och andra liknande tjänster tar upp problemet med typsnittstillstånd genom att ge användarna tillgång till ett stort antal anpassade teckensnitt till skillnad från en årlig prenumerationsavgift. Med den här metoden kan fontstorlekarna ta emot någonting i gengäld för sitt hårda arbete och säkerställer även mot piratkopiering av teckensnitt, eftersom alla teckensnitt är värd centralt på Typekits skyddade servrar. Användare av tjänsten är inte värd för teckensnitt på eget webbutrymme men länkar helt enkelt till dem.
Typekit har samarbetat med några av världens största typsnitt gjuterier för att erbjuda ett brett och varierande utbud av typsnitt för dig att använda. Typekit ger dig många alternativ och kontroll över de teckensnitt du använder. Välj olika typsnitt, varianter och glyfer att använda. Du kan även skapa CSS-stackar och välja fallback-teckensnitt som ska användas när @ font-face inte stöds. Du måste också välja de specifika HTML-taggarna eller CSS-klasserna för att använda den anpassade teckensnittet till. När du är nöjd med de val du har gjort genereras en del Javascript-kod för att du ska kunna använda på din webbplats.
En annan fördel med Typekit är att den syftar till att styra avvikelserna i hur olika webbläsare hanterar text och teckensnitt med hjälp av antydningar.
Typekit erbjuder olika prissättningspaket för att passa olika behov. Ett gratis paket finns tillgängligt som ger dig två teckensnitt att använda från deras provbibliotek på en webbplats. Webbplatsen är tillåten upp till 25 000 sidvisningar per månad och du måste också visa Typekit-märket på webbplatsen, som länkar till information om de teckensnitt du använder. I den andra änden av skalan är Prestandepaketet som ger dig tillgång till hela sortimentet av teckensnitt som är tillgängliga att använda på en obegränsad mängd webbplatser utan keps på antalet sidvisningar. Prestandan ger alla dessa funktioner för en årlig prenumerationsavgift på 99,99.
Fördelar:
Nackdelar:
Den populära fontresursen fonts.com har också lanserat en specialiserad webbtypstjänst, som har över 8000 teckensnitt som du kan använda på dina webbplatser. På liknande sätt som Typekit är det en prenumerationsbaserad tjänst förutom att den prissätts månadsvis. I jämförelse med Typekit fungerar det dyrare men det finns mycket färre restriktioner på teckensnitt. Det fria paketet jämför mycket positivt, vilket ger obegränsad tillgång till 8000 teckensnitt för att du ska kunna använda på så många webbplatser som du vill. I Professional-paketet kan du också upp till 50 teckensnitt att hämta och installera på din dator för att använda i dina mönster.
Fonts.com Web Fonts har några riktigt bra teckensnitt som en del av samlingen - som Helvetica, Univers och Franklin Gothic.
Fördelar:
Nackdelar:
Känd webbdesignföretag Clear Left, som har arbetat för några av världens största företag, har gått ihop med OmniTI och släppt Font Deck. Font Deck är en annan prenumerationsbaserad tjänst, förutom att du bara betalar en årlig avgift för varje enskilt teckensnitt du använder, perfekt för dem som bara vill använda ett eller två teckensnitt för sin personliga blogg.
Teckensnittspriser börjar vid $ 2,50 per år per domän och får obegränsad sidvisningar. Hela teckensnittet är också tillgängligt för att försöka gratis under en längre tid, även om endast tjugo unika IP-adresser kommer att kunna se den. Detta gratispaket syftar till att kompensera för det faktum att du inte kan ladda ner teckensnitt till din lokala dator och använda dem under designfasen. Eftersom Font Deck bara är relativt nytt för scenen är det inte så mycket att välja mellan teckensnitt att välja mellan.
Fördelar:
Nackdelar:
Font Spring tar en något annorlunda tillvägagångssätt än de abonnemangsbaserade tjänsterna och återgår till det traditionella sättet att köpa teckensnitt. Typsnitt köps individuellt och kräver att du hämtar dem och värd typsnitt på din egen webbserver. Font Spring föreslår att 99,9% av de tillgängliga teckensnitt kan användas med @ font-face.
Varje enskilt teckensnitt kan variera i pris och du måste betala en extra kostnad för licensen att använda teckensnittet med @ font-face. @ Font-face-licensen innehåller skrivbordet OpenType-versionen av teckensnittet och de olika formaten du behöver använda på webben.
Det finns många fördelar med att använda den här metoden. Om du verkligen har ditt hjärta inställt på bara ett visst teckensnitt, kan det vara billigare alternativ till prenumerationstjänster. Du kan använda teckensnittet på så många domäner som du vill, så länge du har direkt kontroll över dem och det finns ingen gräns för antalet sidvisningar.
Som en tillfrågad varning är du förbjuden att konvertera eller inbädda teckensnittet med annan teknik som sIFR eller Cuf? N.
Fördelar:
Nackdelar:
Dessa är bara några få tillgängliga fontstjänster, det finns många fler som Typotheque och Webtype. Var och en har sina egna positiva och negativa och ditt val borde vara baserat på dina egna personliga behov. Vissa kan njuta av användarvänligheten av en prenumerationstjänst, medan andra kanske inte tycker om tanken att avstå någon kontroll över deras webbplats till en tredje part. Om det senare är fallet kan du vara bättre att hämta och hosting dina egna webbfonter med hjälp av webbplatser som Font Squirrel.
De närmaste två (sIFR och FLIR) brukar vara som "old school" eftersom de har en rättvis andel av problem, men de är värda att diskutera och veta om.
sIFR har funnits länge nu. När det först kom ut, tillhandahöll det en effektiv metod för att integrera icke-standardiserade teckensnitt när det verkligen inte var något annat alternativ än bilder. sIFR eller skalbar Inman Flash Replacement använder en kombination av Flash och Javascript för att ändra text på webbsidor till ett Flash-element. sIFR har många fördelar, till exempel att texten fortfarande är tillgänglig för skärmsläsare och att den fortfarande kan väljas.
Uttrycket "skalbar" i namnet har emellertid potential att orsaka förvirring. sIFR är skalbar i den meningen att Flash-elementet vågar till storleken på den ursprungliga webbläsarteksten - så att den kan visa all text med största möjliga storlek inom en viss dimension. En text som har ersatts med ett blixtelement kan dock inte justeras när en användare ändrar texten på en sida. vilket uppenbarligen orsakar en tillgänglighetsfråga. sIFR kräver även att både Flash och Javascript ska vara aktiverade på en användares dator för att kunna fungera.
En av skaparna av sIFR, Mike Davidson erkänner också begränsningarna av tekniken. Mike har öppet konstaterat att sIFR inte borde användas för stora textkroppar, eftersom det har en märkbar effekt på webbplatsens prestanda. Mike erkänner också att hans teknik inte är den slutliga lösningen på typografi på webben och refererar helt enkelt till som en "stopgap".
Fördelar:
Nackdelar:
FLIR eller Facelift Image Replacement liknar sIFR förutom att det använder Javascript och PHP för att generera bilder istället för Flash för att ersätta text. Denna metod har den uppenbara fördelen att du inte behöver spendera tid på att skapa individuella bilder för varje textstycke du vill använda en anpassad typsnitt för. Om du väljer att använda en annan typsnitt eller färg för din text är det också mycket lättare att uppdatera texten på din webbplats.
Tyvärr, förutom användarvänlighet och tidsbesparande aspekt av FLIR, erbjuder det inte mycket förbättring jämfört med den traditionella metoden att spara text som bilder. Slutresultatet förblir fortfarande som text som en bild där texten inte kan väljas eller skalas.
Fördelar:
Nackdelar:
Problemet med typsnittslicenser är en pågående och en som har bidragit till den långsamma utvecklingen och antagandet av typsnittsmetoden. Precis som med bilder behöver du tillstånd från författaren, i form av ett EULA (slutanvändarlicensavtal), för att använda ett teckensnitt på din webbplats. Vissa licenser tillåter fri användning av teckensnittet, även för kommersiella ändamål, medan andra endast tillåter personlig användning på en lokal maskin.
När du använder en av de ovan beskrivna teckensnittsutbytesmetoderna, lägger du in ett teckensnitt effektivt på din webbplats eller länkar till en som har laddats upp till din webbserver och det är inte tillåtet av många, även gratis typsnittslicenser. Anledningen till att många typsnitt skapare och gjuterier tillåter inte detta beror på att det tillåter användare av webbplatsen direkt åtkomst till typsnittfilen och de blir oroade över att deras teckensnitt kan hämtas och distribueras olagligt. Problemet har hindrat många typsnittstillverkare att göra sina teckensnitt tillgängliga för användning med metoder som @ font-face.
Det är därför väsentligt viktigt att du, när du använder en av metoderna ovan diskuteras, absolut ser till att teckensnittslicensen tillåter det.
Tack och lov har det här problemet inte hindrat utvecklingen av teckensnittsutbytesmetoder helt och det finns många resurser tillgängliga för att du ska kunna använda anpassade teckensnitt på din webbplats.
"Perfektion är inte värt att vänta på, om du gör det riskerar du att du saknar spännande nya möjligheter"
Vi har diskuterat mycket ovan, och det är uppenbart att det finns många alternativ tillgängliga för dem som vill använda anpassade teckensnitt i deras webbdesigner. Den goda nyheten är att alla dessa metoder är tillgängliga att använda just nu. Det är sant; ingen av metoderna är perfekta, alla har sina egna bra poäng och dåliga poäng. @ font-face har uppenbarligen det största löftet, men det kommer troligtvis att vara några år innan det är helt kollettsäkert. Sanningen är att situationen är sällan perfekt i världen av webbdesign, det kommer alltid att finnas kompromisser och arbetssätt som behövs för att genomföra ny teknik. Perfektion är inte värt att vänta på, om du gör det riskerar du att sakna spännande nya möjligheter.
Det här är verkligen en spännande tid för webbdesign, och det verkar finnas en växande uppskattning och förståelse av typografi på webben. Font-ersättningsmetoder erbjuder ett utmärkt tillfälle att skapa innovativa nya mönster och jag tror att nyckeln inte är att missbruka denna teknik. Ge alltid fallbacks för när sakerna går fel och använd varje metod förnuftigt (ändra inte all text på din webbplats till detta). Ta dig tid att uppskatta och lära dig om bra typ och webben kommer att bli en bättre plats för den.
Har du egna tankar om detta? Har du en fråga? Om vi missat några av dina favoritmetoder, lägger du in dem nedan i kommentarfältet och vi kommer säkert att inkludera det i det här inlägget!
Accentsconagua