Share
CSS 3 er i horisonten, og vi blir alle begeistret. Takket være de nyeste nettleseroppdateringene kan utviklere begynne å jobbe med tidsbesparende nye egenskaper - for eksempel @ font-face. Dessverre er tilgjengeligheten av disse funksjonene begrenset til en liten del av vår generelle brukerbase. I hvert fall for det neste året må vi fortsette å bruke Flash- og Javascript-alternativene når du legger inn fonter.
Heldigvis har en ny konkurrent, Cufón, gjort prosessen utrolig enkel. Hva gjør det annerledes? I stedet for Flash, bruker den en blanding av lerret og VML for å gjengi skrifter. På bare noen få minutter viser jeg hvordan du bruker hvilken som helst skrift du ønsker i webapplikasjonene dine. Spent?
Besøk Cufón nettside og høyreklikk på "Download" knappen øverst. Velg "Save-As" og legg den på skrivebordet.
For å fungere, må vi bruke fontkonverteringsverktøyet på nettsiden. Alternativt kan du laste ned kildekoden og konvertere skriftene dine lokalt. For demonstrasjonsformål har jeg valgt å bruke en motbydelig skrift: "Jokerman". Merk - Windows-brukere: Det kan hende du må kopiere skrifttypen fra mappen "FONT" til skrivebordet for at dette skal fungere.
Hvis du vil, kan du også laste opp kursiv og fet skrift også.
Deretter må du velge hvilke glyfer som skal inkluderes. Ikke vær så rask å bare "VELG ALLE". Å gjøre det vil føre til at JS-filstørrelsen øker dramatisk. For eksempel trenger vi sannsynligvis ikke alle de latinske glyphene; så sørg for at de blir ukontrollert. I mitt tilfelle har jeg sjekket de som du ser nedenfor.
Cufón lar deg angi en bestemt nettadresse for filen, for å øke sikkerheten. Det er ekstremt viktig at du sikrer at du har de riktige rettighetene til å bruke en skrift. REFERER HER for å se gjennom vilkårene. Hvis det er fordelaktig, skriv inn nettadressen til nettstedet ditt i denne boksen.
Siden vi nettopp har begynt, kan du legge de to siste delene til standardverdiene. Godta vilkårene, og klikk "La oss gjøre dette". Du vil da bli presentert med en nedlastingsboks og spør deg hvor du skal lagre det genererte skriptet. Nok en gang lagre det på skrivebordet for enkel henting.
Det neste trinnet er å forberede vårt prosjekt. Opprett en ny mappe på skrivebordet ditt, legg til en index.html-fil, og dra dine to Javascript-filer inn.
Åpne indeksfilen i favorittkodeditoren din, legg til de grunnleggende HTML-kodene, og referer deretter to Javascript-filene like før den avsluttende kroppsmerket (du kan også legge dem til hovedenheten også).
Nå må vi bestemme hvilken tekst som skal erstattes. Siden dokumentet vårt fortsatt er tomt, vær så snill å kaste det med tilfeldig tagger og tekst. La oss prøve å erstatte standard skrift i alle H1-kodene med Jokerman.
Når vi kaller "erstatt" -metoden, kan vi legge til en streng som inneholder tagnavnet som vi ønsker å erstatte - i vårt tilfelle alle H1-koder. Lagre filen, og se den i nettleseren din.
Som alltid trenger IE litt mer til å leke pent med de andre. Hvis du ser denne siden i IE, vil du legge merke til en liten flickr / forsinkelse før skrifttypen gjengis. For å rette opp, legg til:
La oss forestille deg at du vil ha mer kontroll over selektoren din. For eksempel, kanskje du ikke vil endre ALT H1-kodene, men bare de som ligger i overskriften til dokumentet. Cufón har ikke sin egen selektormotor innebygd. Denne funksjonen ble utelatt for å holde filstørrelsen så liten som mulig. Selv om dette kan virke som en fall i starten, er det faktisk en god idé. Med tanke på ubiquity av Javascript rammer i det siste, er det ikke nødvendig å dobbelte opp. Vi vurderer to metoder for å målrette mot bestemte elementer.
Hvis du ikke bruker et JS-rammeverk i prosjektet ditt, bruker vi bare:
Cufon.replace (document.getElementById ( 'header') getElementsByTagName ( 'H1').);
Koden ovenfor sier "Få elementet som har et ID for" header ". Deretter finner du alle H1-kodene i dette elementet, og" erstatter "dem med vår nye skrift.
For å piggyback av jQuery's selektormotor, trenger vi bare å importere jQuery før Cufón.
Accentsconagua
Cufon.replace ('# header h1'); Det er så enkelt! Vær oppmerksom på at du må importere jQuery FØR ditt Cufón-skript for at denne metoden skal fungere.
Tro det eller ikke, du er ferdig! Med bare noen få linjer med enkel kode, er du fri til å bruke hvilken som helst skrift du ønsker! Bare sørg for at du har tillatelse og er i samsvar med type støperier lisensiering.
Hovedproblemet fra perspektivet av typen støperi ser ut til at typeskriptet skript generert av Cufón kunne brukes til å reversere konstruere selve skrifttypen.
-Cameron Moll
Hva er dine tanker? Ha en bedre metode som jeg ikke er kjent med?
