Comment charger des fonts externes dans un document HTML?

Jetez un coup d’oeil à cet article A List Apart . Le CSS pertinent est:

@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif } 

Ce qui précède fonctionnera dans Chrome / Safari / FireFox. Comme Paul D. Waite l’a souligné dans les commentaires, vous pouvez le faire fonctionner avec IE si vous convertissez la police au format EOT .

Les bonnes nouvelles sont que cela semble se dégrader avec élégance dans les anciens navigateurs, aussi longtemps que vous êtes conscient et à l’aise avec le fait que tous les utilisateurs ne verront pas la même police, il est sûr d’utiliser.

Paul Irish a un moyen d’y parvenir qui couvre la plupart des problèmes communs. Voir son article à l’ épreuve des balles @ font-face :

La variante finale, qui empêche le téléchargement des données inutiles par IE et fonctionne sous IE8, Firefox, Opera, Safari et Chrome, ressemble à ceci:

 @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg"); } 

Il se connecte également à un générateur qui traduira les fonts dans tous les formats dont vous avez besoin.

Comme d’autres l’ont déjà précisé, cela ne fonctionnera que dans la dernière génération de navigateurs. Votre meilleur pari est d’utiliser ceci avec quelque chose comme Cufon, et de ne charger Cufon que si le navigateur ne supporte pas @font-face .

CSS3 offre un moyen de le faire avec la règle @ font-face.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Voici un certain nombre de façons différentes de fonctionner dans les navigateurs qui ne prennent pas en charge la règle @ font-face.

En ce qui concerne Jay Stevens, répondez: “Les fonts disponibles dans un fichier HTML doivent être présentes sur la machine de l’utilisateur et accessibles depuis le navigateur Web. A moins que vous ne vouliez dissortingbuer les fonts sur la machine de l’utilisateur via un processus externe séparé, ne soit pas fait. ” C’est vrai.

Mais javascript / canvas / flash existe d’une autre façon: une très bonne solution cufon: http://cufon.shoqolate.com/generate/ bibliothèque qui génère des méthodes de fonts externes très faciles à utiliser.

Si vous souhaitez prendre en charge plus de navigateurs que CSS3, vous pouvez consulter la bibliothèque cufon javascript de la bibliothèque open source

Et voici l’API , si vous voulez faire plus de choses géniales.

Major Pro: vous permet de faire ce que vous voulez / avez besoin.

Major Con: Interdit la sélection de texte dans certains navigateurs, l’utilisation est donc appropriée pour les textes d’en-tête (mais vous pouvez l’utiliser dans tout votre site si vous le souhaitez)

Microsoft utilise une méthode CSS propriétaire pour inclure les fonts intégrées ( http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx ), mais cela ne devrait probablement pas être recommandé.

J’ai utilisé sIFR auparavant, car cela fonctionne très bien – il utilise Javascript et Flash pour remplacer dynamicment le texte normal par du Flash contenant le même texte dans la police souhaitée (la police est incorporée dans un fichier Flash). Cela n’affecte pas le balisage autour du texte (cela fonctionne en utilisant une classe CSS), vous pouvez toujours sélectionner le texte, et si l’utilisateur ne dispose pas de Flash ou l’a désactivé, il se dégradera gracieusement au texte dans n’importe quelle police vous spécifiez en CSS (par exemple Arial).

Essaye ça

  
This is Sample text
 
This is Sample text 

Je n’ai vu aucune référence à Raphael.js. Donc j’ai pensé l’inclure ici. Raphael.js est rétrocompatible avec IE5 et un tout début Firefox, ainsi que tout le rest des navigateurs. Il utilise SVG quand il peut et VML quand il ne peut pas. Ce que vous faites avec, c’est dessiner sur une canvas. Certains navigateurs vous permettront même de sélectionner le texte généré. Raphael.js peut être trouvé ici:

http://raphaeljs.com/

Cela peut être aussi simple que de créer votre zone de dessin sur papier, en spécifiant la police, le poids de la police, la taille, etc., puis en lui indiquant de placer votre chaîne de texte sur le papier. Je ne sais pas si cela résout les problèmes de licence ou non, mais cela dessine le texte, donc je suis assez certain que cela contournera les problèmes de licence. Mais vérifiez avec votre avocat pour être sûr. 🙂