Share
På grunn av det faktum at @ font-face kan være litt altfor komplisert, har det ikke fanget på like mye som det burde. Når du begynner å lese om lisensiering, kan forskjellige skriftformater, nettkonsekvenser, potensielt bli mer problemer enn det er verdt.
Men på fem minutter vil jeg prøve å forenkle prosessen med å jobbe med tilpassede skrifttyper så mye jeg muligens kan. Tjenester som Font Equirrel bidrar til å gjøre oppgaven til en cinch!
Accentsconagua
@ font-face font-family: 'blok-regular'; src: url ('type / Blokletters-Penlood.eot'); src: local ('Blokletters Pencil Pencil'), lokal ('Blokletters-Pencil'), url ('type / Blokletters-Penlood.ttf') format ('truetype'); @ font-face font-family: 'blokk-italic'; src: url ('type / Blokletters-Balpen.eot'); src: local ('Blokletters Balpen Balpen'), lokal ('Blokletters-Balpen'), url ('type / Blokletters-Balpen.ttf') format ('truetype'); @ font-face font-family: 'blok-heavy'; src: url ('type / Blokletters-Viltstift.eot'); src: local ('Blokletters Viltstift Viltstift'), lokal ('Blokletters-Viltstift'), url ('type / Blokletters-Viltstift.ttf') format ('truetype'); h1 font-family: blok-heavy, helvetica, arial; Legg merke til hvordan vi refererer til både en .eot og .ttf font? Dette skyldes at selvfølgelig bruker Internet Explorer bare sitt eget format, som ennå ikke har tatt på seg. Som sådan må vi først importere den .eot-filen, og deretter gå videre til de forskjellige formatene for Firefox, Safari, etc.. Det er viktig at du laster .eot-versjonen først.
Deretter søker vi etter skrifttypen på brukerens datamaskin ved å bruke "lokal" attributtet. Hvis det er ubegrunnet, så sender vi bare en URL som laster inn skrifttypen.
Dette var definitivt en bekymring. Hvis Explorer ikke kan fungere med truetype-formatet, vil vi ikke kaste bort tid på å prøve å laste ned skriften. Heldigvis, på grunn av alle de lokale attributter, og kommaene, vil IE ikke forstå noe av det. Som sådan vil det bare hoppe over linjen alle sammen, og dermed bare bruke .eot-versjonen.
