Share
På grund av att @ font-face kan vara lite alltför komplicerat, har det inte fångats på så mycket som det borde. När du börjar läsa om licensiering kan olika typsnitt, webbläsarekonsekvenser potentiellt bli mer problem än vad det är värt.
Men på fem minuter försöker jag förenkla processen med att arbeta med anpassade teckensnitt så mycket som möjligt. Tjänster som Font Ekorre hjälper till att göra uppgiften till en cinch!
Accentsconagua
@ font-face font-family: 'block-regular'; src: url ('typ / Blokletters-Penlood.eot'); src: local ('Blokletters Pencil Pencil'), lokal ('Blokletters-Pencil'), url ('typ / Blokletters-Penlood.ttf') format ('truetype'); @ font-face font-family: 'block-italic'; src: url ('typ / Blokletters-Balpen.eot'); src: local ('Blokletters Balpen Balpen'), lokal ('Blokletters-Balpen'), url ('typ / Blokletters-Balpen.ttf') format ('truetype'); @ font-face font-family: 'block-heavy'; src: url ('typ / Blokletters-Viltstift.eot'); src: local ('Blokletters Viltstift Viltstift'), lokal ('Blokletters-Viltstift'), url ('typ / Blokletters-Viltstift.ttf') format ('truetype'); h1 font-family: block-heavy, helvetica, arial; Lägg märke till hur vi hänvisar till både en .eot och .ttf font? Detta beror på att Internet Explorer bara använder sitt eget format, som ännu inte har hunnit fånga. Som sådan måste vi först importera .eot-filen och sedan gå vidare till olika format för Firefox, Safari, etc.. Det är viktigt att du laddar upp .eot-versionen först.
Därefter söker vi efter teckensnittet på användarens dator med hjälp av attributet "lokalt". Om det är ogrundligt, skickar vi bara en webbadress som laddar in teckensnittet.
Detta var definitivt en oro. Om Utforskaren inte kan fungera med truetype-formatet vill vi inte slösa bort tid på att försöka ladda ner teckensnittet. Lyckligtvis, på grund av alla de lokala attributen och kommatecken, kommer IE inte att förstå något av det. Som sådan kommer det helt enkelt att hoppa över linjen alla tillsammans, så att endast använda .eot-versionen.
