Comment puis-je charger externe polices dans un document HTML?

Comment faire pour charge externe des fichiers de police dans un document HTML.

Exemple:
Rendre le texte "blah blah blah blah blah blah blah" une police personnalisée à partir d'une TTF fichier dans le même répertoire en utilisant le HTML CSS et/ou JAVASCRIPT

InformationsquelleAutor Eric | 2010-02-10

fonts html

85

Prendre un coup d'oeil à ce Une Liste Outre l'article. Les CSS est:
```
@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
```
Le ci-dessus ne fonctionne dans Chrome/Safari/FireFox. Comme Paul D. Waite souligné dans les commentaires, vous pouvez l'obtenir pour fonctionner avec IE si vous convertissez la police de la EOT format.

La bonne nouvelle, c'est que cela semble dégrader gracieusement dans les navigateurs plus anciens, donc, tant que vous êtes conscient et à l'aise avec le fait que pas tous les utilisateurs verront la même police, il est sûr à utiliser.
- IE 8 ne prennent en charge, mais vous avez besoin de convertir votre police à la FTO. Polices Web sont un peu... impliqués. Voir snook.ca/archives/html_and_css/devenir-une-police-incorporation-master
- Très cool, ne le savais pas. La mise à jour de ma réponse à réfléchir.
InformationsquelleAutor Chris Van Opstal
19

Paul Irlandais a une manière de le faire qui couvre la plupart des problèmes courants. Voir son l'épreuve des balles de @font-face de l'article:

La dernière variante, qui s'arrête de données inutile d'être téléchargé par IE, et travaille dans 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 a également des liens vers un générateur qui permettra de traduire les polices 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 en conjonction avec quelque chose comme Cufon, et ne charge que les Cufon si le navigateur ne prend pas en charge @font-face.

InformationsquelleAutor Sean Vieira
3

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

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

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

Ici est un certain nombre de façons différentes, qui vont travailler dans les navigateurs qui ne supportent pas le @font-face à la règle.

InformationsquelleAutor roflwaffle
1

Concernant Jay Stevens réponse: "Les polices disponibles pour une utilisation dans un fichier HTML à être présent sur la machine de l'utilisateur et accessible depuis le navigateur web, de sorte que si vous souhaitez distribuer les polices de l'ordinateur de l'utilisateur par un processus externe, il ne peut pas être fait." C'est vrai.

Mais il est une autre façon en utilisant javascript /toile /flash - très bonne solution donne cufon: http://cufon.shoqolate.com/generate/ bibliothèque qui génère un très facile à utiliser des polices méthodes.

InformationsquelleAutor aviv
1

Si vous voulez soutenir plus en plus de navigateurs que le CSS3 de fantaisie, vous pouvez rechercher à la bibliothèque open source cufon bibliothèque javascript

Et voici l'API, si vous voulez faire plus de funk.

Grands Pro: Permet de faire ce que vous voulez ou avez besoin.

Majeur Con: Interdit la sélection de texte dans certains navigateurs, afin de l'utiliser est appropriés sur l'en-tête de textes (mais vous pouvez l'utiliser dans votre site si vous le souhaitez)

InformationsquelleAutor jpabluz
1

Microsoft ont une propriété CSS méthode, y compris les polices intégrées (http://msdn.microsoft.com/en-us/library/ms533034(SV.85).aspx), mais cela ne devrait probablement pas être recommandé.

J'ai utilisé sIFR avant que cela fonctionne très bien - il utilise le Javascript et le Flash pour remplacer dynamiquement texte normal avec quelques Flash contenant le même texte dans la police que vous souhaitez (la police est intégrée dans un fichier Flash). Cela n'affecte pas le balisage autour du texte (il fonctionne en utilisant une classe CSS), vous pouvez toujours sélectionner le texte, et si l'utilisateur ne dispose pas de Flash ou s'est-il désactivé, il va se dégrader gracieusement vers le texte dans n'importe quelle police que vous indiquez dans le CSS (par exemple Arial).
- Ce n'est pas vraiment de propriété: les autres navigateurs sont en soutenant @font-face, donc c'est en cours de standardisation. (Et je crois qu'ils ont offert leurs propriétaires format de police d'un corps de normes ainsi.)
- Eh bien, il est bon que la TRAME format a été proposé à l'organisme de normalisation, mais je n'aurais pas pensé que c'est pris en charge par d'autres navigateurs à l'heure actuelle, et l'article que j'ai lié aux mentions Internet Explorer 4.0, donc, à cet égard, il semble comme quelque chose à éviter.
InformationsquelleAutor Graham Clark

Essayer cette

<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>

InformationsquelleAutor Lead Developer

0

Je n'ai pas vu de référence à Raphael.js. J'ai donc pensé que je pourrais l'inclure ici. Raphael.js est rétro-compatible tous le chemin du retour pour IE5 et très tôt, Firefox, ainsi que tous le reste des navigateurs. Il utilise SVG quand il peut et VML quand il ne peut pas. Ce que vous faites, c'est de dessiner sur une toile. Certains navigateurs vont même vous permettre de sélectionner le texte qui est généré. Raphael.js peut être trouvé ici:

http://raphaeljs.com/

Il peut être aussi simple que de créer votre papier de la zone de dessin, en précisant la police, le poids, la taille, etc... et puis pour lui dire de mettre votre chaîne de texte sur le papier. Je ne suis pas sûr si elle permet de contourner les problèmes de licence ou pas, mais c'est le dessin, le texte, donc je suis assez certain qu'il ne contourner les problèmes de licence. Mais vérifiez avec votre avocat pour être sûr. 🙂

InformationsquelleAutor Mark Manning

Vous devez vous connecter pour publier un commentaire.