web-dev-qa-db-fra.com

Comment charger des polices externes dans un document HTML?

Comment charger des fichiers de polices externes dans un document HTML.

Exemple: Faites du texte "bla bla bla bla bla bla bla" une police personnalisée à partir d'un fichier TTF du même répertoire en utilisant HTML CSS et/ou JAVASCRIPT

htmlfonts
53
Eric

Jetez un oeil à ceci Un article de 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 sous 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 . 

La bonne nouvelle est que cela semble se dégrader avec élégance dans les anciens navigateurs. Par conséquent, si vous êtes conscient du fait que tous les utilisateurs ne verront pas la même police, vous pourrez l'utiliser en toute sécurité.

82
Chris Van Opstal

Paul Irish a une façon de faire qui couvre la plupart des problèmes courants. Voir son article bullet-proof @ font-face :

La dernière variante, qui empêche le téléchargement de données inutiles par IE, et fonctionne dans IE8, Firefox, Opera, Safari et Chrome se présente comme suit:

@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 a également un lien vers un générateur qui traduira les polices dans tous les formats dont vous avez besoin.

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

18
Sean Vieira

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/

Ici est un nombre de façons différentes qui fonctionneront dans les navigateurs qui ne supportent pas la règle @ font-face.

3
roflwaffle

Concernant la réponse de Jay Stevens: "Les polices disponibles dans un fichier HTML doivent être présentes sur la machine de l'utilisateur et accessibles à partir du navigateur Web. Par conséquent, sauf si vous souhaitez les distribuer sur la machine via un processus externe distinct, il peut ne pas être fait. " C'est vrai.

Mais il existe un autre moyen d’utiliser javascript/canvas/flash - très bonne solution pour donner à cufon: http://cufon.shoqolate.com/generate/ library qui génère des méthodes de polices externes très faciles à utiliser.

1
aviv

Si vous voulez supporter plus de navigateurs que la fantaisie CSS3, vous pouvez regarder la bibliothèque open source la bibliothèque javascript de cufon

Et voici l’API , si vous voulez faire des trucs plus funky.

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

Principal inconvénient: n'autorise pas la sélection de texte dans certains navigateurs, il est donc préférable d'utiliser le texte d'en-tête (mais vous pouvez l'utiliser dans tout votre site si vous le souhaitez)

1
jpabluz

Microsoft a une méthode CSS propriétaire consistant à inclure des polices incorporées ( http://msdn.Microsoft.com/en-us/library/ms533034(VS.85).aspx ), mais cela ne devrait probablement pas être recommandé.

J'ai utilisé sIFR before car cela fonctionne très bien - il utilise Javascript et Flash pour remplacer dynamiquement le texte normal par du Flash contenant le même texte dans la police de votre choix (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 n'a pas Flash ou l'a désactivé, il se dégradera gracieusement en texte, quelle que soit la police. vous spécifiez en CSS (par exemple Arial).

1
Graham Clark

Je n'ai vu aucune référence à Raphael.js. Alors j'ai pensé l'inclure ici. Raphael.js est rétrocompatible avec IE5, un très tôt Firefox et tous les autres navigateurs. Il utilise SVG quand il le peut et VML quand il ne le peut pas. Ce que vous en faites, c'est dessiner sur une toile. Certains navigateurs vous permettent 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, de spécifier la police, son épaisseur, sa taille, etc., puis de lui indiquer 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 il dessine le texte, alors je suis à peu près sûr qu'il contourne les problèmes de licence. Mais vérifiez auprès de votre avocat pour en être sûr. :-)

0
Mark Manning

Essaye ça

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
0
Mahendra Jella