Legg til tilpassede skrifter på nettstedet ditt med @ font-face-egenskapen

Mitt siste innlegg om å få fontinspirasjon fra film og TV påpekte flere tilpassede skrifter som ble opprettet basert på åpningstitlene for filmer som Men In Black og Back To The Future og tv-serier som I Dream of Jeannie og Gilligan's Island . I denne andre delen vil jeg vise deg hvordan du legger inn disse tilpassede skriftene på nettstedene dine, slik at brukerne kan se og sette pris på de fine skriftene uansett nettleser eller enhet.

Vise tilpassede skrifter fra nettstedet ditt

Nå som du har lastet ned en samling fine film- og TV-skrifter av ekte type, lurer du kanskje på hvordan du får dem til en nyttig tilstand på nettstedet ditt. Med mindre brukerne dine har de samme skriftene installert på sine lokale enheter, vil de ikke kunne se dine smarte, tilpassede skrifter. Heldigvis er det en måte å få disse tollfontene til brukerens enheter ved å bruke flere alternativer; den første er å ansette en grafisk bilderedigerer, og den andre er å innlemme @ font-face- egenskapen i CSS-en.

Et alternativ til å løse problemet blir oppgaven med å lage titler, logoer eller overskrifter fra din favoritt grafiske bilderedigerer, forutsatt at du allerede har installert skriften på den lokale PC-en. Alt du trenger å gjøre er å lage det tekstlige innholdet ved å bruke spesiell tilpasset font. Lignende trinn for å lage titler på denne måten er beskrevet i opplæringen, "Lag et minimalistisk nettdesignoppsett ved hjelp av Photoshop, " spesielt delen som beskriver oppretting av overskriftsdel i innlegget. En del av prosessen vises med teksten "Nettstedets navn" i figur A nedenfor. Imidlertid betyr denne prosessen at nettstedets titler og overskrifter vil gi fra seg SEO-anerkjennelse, siden tekst som vises som bilder ikke registreres i de fleste søkemotorsøk.

Figur A

Et bedre alternativ innebærer å skyve de tilpassede skriftene til en sentral katalog på nettet ditt, og deretter opprette et sett med CSS-stilegenskaper for å kalle dem som definert. For eksempel kan du plassere alle nettfontene dine i en katalog som / htdocs / web / fonter .

I dette eksemplet vil jeg bruke Back to the Future- skrifttypen for overskrifter på første nivå, I Dream of Jeannie- font for andre nivåoverskrifter og Gilligan's Island- font for avsnitt. Dette er kanskje ikke den beste bruken av typografi på en webside; Dette er imidlertid kun for demonstrasjonsformål. Jeg lastet ned og kopierte de tre * .ttf- filene til fontkatalogen min, og opprettet deretter index.html-filen sammen med CSS-filen styles.css.

Ved å bruke @ font-face-egenskapen i CSS kan du ringe alle tilpassede skrifter og sikre at de vises for enhver bruker. Du kan legge til et ubegrenset antall @ font-face eiendom erklæringer som du ønsker; som i dette tilfellet, har jeg tre som vises i CSS-kodebiten nedenfor:

 @ font-face { 
 font-family: bttf_font; 
 src: lokalt (bttf_font), url ('fonts / bttf.ttf') format ('opentype'); 
 } 
 @ font-face { 
 font-family: jeannie_font; 
 src: local (jeannie_font), url ('fonts / jeannie.ttf') format ('opentype'); 
 } 
 @ font-face { 
 font-family: gilligan_font; 
 src: local (gilligan_font), url ('fonts / gilligan.ttf') format ('opentype'); 
 } 
 Deretter blir fontfamilien tildelt de enkelte elementene: 
 h1 { 
 font-family: bttf_font; 
 font-size: 32 piksler; 
 font-strekning: ekstra-ekspandert; 
 } 
 h2 { 
 font-family: jeannie_font; 
 font-size: 24 piksler; 
 font-strekning: ekstra-ekspandert; 
 } 
 p { 
 font-family: gilligan_font; 
 font-size: 18 piksler; 
 } 

Internet Explorer

 Det er et kjent problem med eldre versjoner av Internet Explorer som ikke gjengir * .ttf-filtyper, og de må konverteres til en * .eot-filtype. I disse tilfellene må du konvertere * .ttf-filen til en * .eot-fil og deretter legge den til @ font-face-egenskapen. Når det gjelder skriften Back to the Future, vil den vises først i skrifttabelen: 
 @ font-face { 
 font-family: bttf_font; 
 src: url ('bttf.eot'); 
 src: lokalt (bttf_font), url ('fonts / bttf.ttf') format ('opentype'); 
 } 

Sjekk ut MSDN-biblioteket om About Font Embedding for mer informasjon om hvordan du oppretter * .eot-filene for din tilpassede fontstabel.

Demonstrasjonsfilene er tilgjengelige for nedlasting, og demosiden vises i figur B som vist i Chrome 20.0.1.

Figur B

Bruker du egendefinerte skrifter på nettstedene dine? I så fall, fortell oss hvilke skrifter du bruker og hvordan du har implementert dem.

© Copyright 2020 | mobilegn.com