Share
CSS 3 est à l'horizon, et nous sommes tous excités. Grâce aux dernières mises à jour du navigateur, les développeurs peuvent commencer à travailler avec de nouvelles propriétés permettant de gagner du temps, telles que @ font-face. Malheureusement, la disponibilité de ces fonctionnalités est limitée à une infime fraction de notre base d'utilisateurs globale. Au moins pour l’année à venir, nous devrons continuer à utiliser les alternatives Flash et Javascript lors de l’incorporation de polices..
Heureusement, un nouveau candidat, Cufón, a rendu le processus incroyablement simple. Qu'est-ce qui le rend différent? Plutôt que Flash, il utilise un mélange de canvas et de VML pour restituer les polices. En quelques minutes, je montrerai comment utiliser la police de votre choix dans vos applications Web. Excité?
Visitez le site Web de Cufón et cliquez-droit sur le bouton "Télécharger" en haut. Choisissez "Enregistrer sous" et placez-le sur votre bureau.
Pour fonctionner, nous devons utiliser l'utilitaire de conversion de polices sur le site Web. Vous pouvez également télécharger le code source et convertir vos polices localement. À des fins de démonstration, j'ai choisi d'utiliser une police désagréable: "Jokerman". Remarque - Utilisateurs de Windows: vous devrez peut-être copier la police de votre dossier "FONT" sur le bureau pour que cela fonctionne..
Si vous le souhaitez, téléchargez également les fichiers en italique et en gras..
Ensuite, vous devrez choisir quels glyphes doivent être inclus. Ne soyez pas si prompts à simplement "CHOISIR TOUT". Cela entraînerait une augmentation considérable de la taille du fichier JS. Par exemple, nous n’avons probablement pas besoin de tous les glyphes latins; alors assurez-vous qu'ils ne sont pas cochés. Dans mon cas, j'ai vérifié celles que vous voyez ci-dessous.
Cufón vous permet de désigner une URL spécifique pour votre fichier, pour renforcer la sécurité. Il est extrêmement important de vous assurer que vous disposez des privilèges appropriés pour utiliser une police. Référez-vous ICI pour revoir les termes. Si avantageux, tapez l'URL de votre site dans cette case.
Comme nous venons tout juste de commencer, vous pouvez laisser les deux dernières sections à leurs valeurs par défaut. Acceptez les conditions et cliquez sur "Faisons-le". Une boîte de téléchargement vous sera ensuite présentée pour vous demander où sauvegarder le script généré. Encore une fois, enregistrez-le sur votre bureau pour une récupération facile.
La prochaine étape consiste à préparer notre projet. Créez un nouveau dossier sur votre bureau, ajoutez un fichier index.html et faites glisser vos deux fichiers Javascript dans.
Ouvrez le fichier d'index dans votre éditeur de code préféré, ajoutez les balises HTML de base, puis faites référence à vos deux fichiers Javascript juste avant la balise body de fermeture (vous êtes également libre de les ajouter à la section head)..
Maintenant, nous devons décider quel texte doit être remplacé. Puisque notre document est toujours vide, n'hésitez pas à le jeter avec des balises et du texte aléatoires. Essayons de remplacer la police par défaut dans toutes les balises H1 par Jokerman.
Lorsque nous appelons la méthode "replace", nous pouvons ajouter une chaîne contenant le nom de la balise que nous souhaitons remplacer - dans notre cas, toutes les balises H1. Enregistrez le fichier et affichez-le dans votre navigateur..
Comme toujours, IE a besoin d’un peu plus pour bien jouer avec les autres. Si vous affichez cette page dans IE, vous remarquerez un léger flickr / délai avant que la police ne soit rendue. Pour remédier, ajoutez simplement:
Imaginons que vous souhaitiez avoir plus de contrôle sur votre sélecteur. Par exemple, vous ne voulez peut-être pas changer TOUTES les balises H1, mais simplement celles qui figurent dans l'en-tête de votre document. Cufón n'a pas son propre moteur de sélecteur intégré. Cette fonctionnalité a été omise pour conserver la taille du fichier aussi petite que possible. Bien que cela puisse sembler une chute au début, c'est en fait une excellente idée. Compte tenu de l'omniprésence des frameworks Javascript ces derniers temps, il n'est pas nécessaire de doubler. Nous allons examiner deux méthodes pour cibler des éléments spécifiques.
Si vous n'utilisez pas de framework JS dans votre projet, nous utiliserons simplement:
Accentsconagua
Cufon.replace (document.getElementById ('en-tête'). GetElementsByTagName ('h1')); Le code ci-dessus indique "Obtenez l’élément qui a pour id" en-tête ". Ensuite, recherchez toutes les balises H1 dans cet élément et" remplacez-les "par notre nouvelle police..
Pour profiter du moteur de sélection de jQuery, il suffit d'importer jQuery avant Cufón.
Cufon.replace ('# header h1'); C'est aussi simple que ça! Veuillez noter que vous DEVEZ importer jQuery AVANT votre script Cufón pour que cette méthode fonctionne..
Croyez-le ou non, vous avez terminé! Avec seulement quelques lignes de code simple, vous êtes libre d'utiliser la police de votre choix! Assurez-vous simplement que vous avez l'autorisation et que vous êtes conforme aux licences de type Foundries..
Du point de vue de la fonderie de caractères, la principale préoccupation semble être que le script de police de caractères généré par Cufón puisse être utilisé pour le reverse engineering de la police de caractères elle-même..
-Cameron Moll
Quelles sont vos pensées? Avoir une meilleure méthode que je ne connais pas?
