Fem typsnitt för att använda med font-face
För något år sedan var det lite oklart vilka licenser som kunde användas med inbäddade typsnitt på webben, nu har jag inte riktigt hängt med 100% i utvecklingen men ett par sidor har ploppat upp som listar typsnitt som kan användas. Läs hela inlägget →
Typografera din webbdesign med font-face
Egentligen förstår jag inte varför inte @font-face används mer än vad det gör, cirka 75,41% av besökarna (siffror ska tas med en nypa salt som vanligt) stödjer inbäddade typsnitt på ett sätt eller ett annat. Internet Explorer (kors i taket) har faktiskt haft stöd sedan version 4, om än på ett annat sätt, vilket är ganska imponerande.
@font-face med typsnittet GrauBlauWeb
Nåväl, tänkte gå igenom lite snabbt hur du kan lösa snygga fonts för större delen av dina besökare, men även med typografisk fallback för de som inte har stöd för tekniken.
För det första så är det en stor skillnad vi måste reda ut, Internet Explorer stödjer enbart @font-face via sitt egna format .eot (Embeded Open Type) och inte .otf, vilket är det öppna typsnittsformatet, som resten av webbläsarna. Microsoft har därför lagt ut ett uråldrigt verktyg på 20MB som kan konvertera .ttf till oet. Detta känns krångligt eftersom det finns smartare vägar via onlineverktyg.
Verktygen som vi ska användas är först: Online font converter vilket konverterar typsnittet till .ttf, sedan ttf2eot vilket tar hand om den sista konverteringen till .eot. När .eot-filen är redo på din dator så är också du redo att implementera CSSen som krävs för att få det hela att fungera.
@font-face { font-family: 'namn'; src: url('din/katalog/namn.eot'); src: url('din/katalog/namn.eot?#iefix') format('embedded-opentype'), url('din/katalog/namn.woff') format('woff'), url('din/katalog/namn.ttf') format('truetype'), url('din/katalog/namn.svg#namn') format('svg'); font-weight: normal; font-style: normal; }
Byt ut “namn” till det du tycker att typsnittet ska heta i CSS-filen, helst och mest logiskt så döper man nog det till typsnittets namn.
.head { font-family: namn, Arial, sans-serif; }
Ovanstående kod är ganska simpel, namn är det namnet du har gett ditt typsnitt, Arial står för din fallback, som kan bytas ut till ett webbsäkert typsnitt som ser ut som det nya typsnittet. En fallback är att rekommendera för att fånga upp de sista 25% av besökarna som inte har stöd för tekniken.
Hoppas du har förstått grunderna i konceptet, det finns mer att läsa på css3.info och w3.org annars.
Webbsäkra färger – ingenting att bry sig om
Svar på frågan: Webbsäkra färger, något man behöver bry sig om?
Fortfarande idag finns det många applikationer inriktade mot webbdesign, grafisk design och ritande som har en färgpalett som heter “websafe colors“. Frågan är varför, eftersom vi knappt behöver bry oss om det i dagens läge?
Anledningen till att just dessa 216 färger kallas webbsäkra är att i urminnes tider så hade inte skärmarna högre färgomfång än 256 färger. Av dessa 256 färger så var en 10-20 stycken reserverade för operativsystemet.
Min första PC köptes 1997, grafikkortet på 4 MB och hade en otrolig färgomfång på cirka 16 miljoner färger. Dessa webbsäkra färger är alltså en kvarleva sedan innan dess.
Kort svar på frågan: Nej, du behöver inte bry dig om webbsäkra färger längre, i princip kommer samma sak snart hända med typsnitt i och med @font-face och CSS3.