Share
CSS 3 is aan de horizon en we worden allemaal opgewonden. Dankzij de nieuwste browserupdates kunnen ontwikkelaars beginnen met het werken met tijdbesparende nieuwe eigenschappen - zoals @ font-face. Helaas is de beschikbaarheid van deze functies beperkt tot een kleine fractie van onze algehele gebruikersbasis. In ieder geval voor het volgende jaar of zo moeten we de Flash- en Javascript-alternatieven blijven gebruiken bij het insluiten van lettertypen.
Gelukkig heeft een nieuwe mededinger, Cufón, het proces ongelooflijk eenvoudig gemaakt. Wat maakt het anders? In plaats van Flash gebruikt het een combinatie van canvas en VML om de lettertypen weer te geven. In slechts een paar minuten laat ik zien hoe u elk gewenst lettertype in uw webtoepassingen kunt gebruiken. opgewonden?
Ga naar de website van Cufón en klik met de rechtermuisknop op de knop "Downloaden" bovenaan. Kies "Opslaan als" en plaats het op uw bureaublad.
Om te kunnen functioneren, moeten we het hulpprogramma lettertypeconversie op de website gebruiken. U kunt ook de broncode downloaden en uw lettertypen lokaal converteren. Voor de demonstratie heb ik ervoor gekozen om een onaangenaam lettertype te gebruiken: "Jokerman". Opmerking - Windows-gebruikers: misschien moet u het lettertype van uw "FONT" -map naar het bureaublad kopiëren om dit te laten werken.
Upload desgewenst ook de cursieve en vetgedrukte bestanden.
Vervolgens moet u kiezen welke glyphs moeten worden opgenomen. Wees niet zo snel om gewoon "ALLES KIEZEN". Als u dit doet, zal de JS-bestandsgrootte dramatisch toenemen. We hebben bijvoorbeeld waarschijnlijk niet alle Latijnse glyphs nodig; dus zorg ervoor dat ze niet worden aangevinkt. In mijn geval heb ik degenen gecontroleerd die u hieronder ziet.
Met Cufón kunt u een specifieke URL voor uw bestand aanwijzen om de veiligheid te vergroten. Het is uiterst belangrijk dat u ervoor zorgt dat u over de juiste rechten beschikt om een lettertype te gebruiken. RAADPLEEG HIER om de voorwaarden te bekijken. Als dit nuttig is, typt u de URL van uw site in dit vak.
Aangezien we net begonnen zijn, kunt u de laatste twee secties op hun standaardwaarden laten staan. Accepteer de voorwaarden en klik op "Laten we dit doen". U krijgt dan een downloadvak aangeboden waarin u wordt gevraagd waar u het gegenereerde script kunt opslaan. Bewaar het opnieuw op uw bureaublad om ze eenvoudig terug te vinden.
De volgende stap is om ons project voor te bereiden. Maak een nieuwe map op uw bureaublad, voeg een index.html-bestand toe en sleep uw twee Javascript-bestanden naar binnen.
Open het indexbestand in uw favoriete codebewerker, voeg de standaard HTML-tags toe en verwijs vervolgens naar uw twee Javascript-bestanden net voor de afsluitende body-tag (u kunt ze ook toevoegen aan de head-sectie).
Nu moeten we beslissen welke tekst moet worden vervangen. Omdat ons document nog steeds leeg is, kunt u het gerust met willekeurige tags en tekst vervuilen. Laten we proberen het standaardlettertype in alle H1-tags te vervangen door Jokerman.
Wanneer we de "replace" -methode aanroepen, kunnen we een string toevoegen die de tag-naam bevat die we willen vervangen - in ons geval alle H1-tags. Sla het bestand op en bekijk het in uw browser.
Zoals altijd heeft IE een beetje meer nodig om goed met de anderen te kunnen spelen. Als u deze pagina in IE bekijkt, ziet u een kleine flickr / vertraging voordat het lettertype wordt gerenderd. Om iets te verhelpen, voegt u gewoon toe:
Laten we ons voorstellen dat je meer controle wilt over je selector. Misschien wilt u bijvoorbeeld niet alle H1-tags wijzigen, maar alleen die in de kop van uw document. Cufón heeft geen eigen selector-engine ingebouwd. Deze functie werd weggelaten om de bestandsgrootte zo klein mogelijk te houden. Hoewel dit in eerste instantie een teleurstelling lijkt, is het eigenlijk een geweldig idee. Gezien de alomtegenwoordigheid van Javascript-frameworks de laatste tijd, is het niet nodig om te dubbelen. We zullen twee methoden bekijken om specifieke elementen te targeten.
Als u geen JS-raamwerk in uw project gebruikt, gebruiken we eenvoudigweg:
Cufon.replace (document.getElementById ( 'header') getElementsByTagName ( 'h1').);
De bovenstaande code geeft aan: "Haal het element op dat een id van" header "heeft. Zoek dan alle H1-tags in dit element en" vervang "ze door ons nieuwe lettertype.
Om van de selector-engine van jQuery af te halen, hoeven we jQuery alleen voor Cufón te importeren.
Accentsconagua
Cufon.replace ('# header h1'); Zo simpel is het! Houd er rekening mee dat u jQuery VOOR UW Cufón-script MOET importeren om deze methode te laten werken.
Geloof het of niet, je bent klaar! Met slechts een paar regels eenvoudige code kunt u elk gewenst lettertype gebruiken! Zorg ervoor dat u toestemming hebt en dat u voldoet aan de licentievereisten van het type foundries.
De grootste zorg vanuit het perspectief van de lettergieterij lijkt te zijn dat het lettertype-script dat door Cufón werd gegenereerd, zou kunnen worden gebruikt om het eigenlijke lettertype zelf te manipuleren.
-Cameron Moll
hoe denk jij erover? Heb een betere methode die ik niet ken?
