7
votes

Incorporer la police dans la page Web

ive googled beaucoup en essayant de déterminer comment incorporer des polices sur une page Web. Si je comprends bien, vous devez télécharger les polices sur votre page Web dans les formats .ttf et .Eot. et l'utilisation @ font-face dans une feuille de style.

J'ai placé the roythings_italique.eot et kingthings_italique.ttf à la racine de ma page Web.

Createt une feuille de style comme ceci. < Pré> xxx

Tout d'abord, je me réfère comme celui-ci comme celui-ci xxx

et que j'essaie de l'utiliser comme ceci xxx < / Pré>

Mais peu importe si j'utilise IE8 ou Chrome2, la police n'est pas modifiée.

Si je comprends http://randsco.com/?p=680&more = 1 & C = 1 corriger doit être possible

Si j'ouvre la source dans IE8 Devrais-je alors pouvoir voir le nom de police? Parce que si je cherche roi à travers le code IE8, je ne trouve rien


0 commentaires

9 Réponses :


0
votes

AFAIK, l'emboîtement de la police à l'aide de PURE CSS n'est pas vraiment prise en charge par la plupart des navigateurs (encore).

D'autres solutions existent cependant. Si vous ne vous dérangeez pas d'utiliser JavaScript, consultez CUFON , qui utilise SVG / VML Pour rendre la police dans la plupart des navigateurs Web utilisées aujourd'hui (même IE6).


0 commentaires

1
votes

Ce n'est pas vraiment quelque chose que vous pouvez, ou devrait faire. La majorité du Web s'est installée sur certaines polices de base (SERIF, SANS-SERIF, etc.), et il est alors à la hauteur du navigateur de décider. Vous pouvez spécifier plusieurs polices et avoir le déclassement du navigateur si ce n'est pas disponible:

font-family: Kingthings Italique, sans-serif


0 commentaires

0
votes

L'incorporation de la police utilisant CSS n'est pas censée fonctionner dans des navigateurs Web modernes. Plus précisément, l'intégration de la police utilisant CSS faisait partie de CSS2 et a été prise en charge par certains navigateurs, mais rétractée dans CSS2.1 (et réellement retiré de la spécification du courant CSS2).

Attendez-vous à un retour de la police avec CSS3 lorsque les navigateurs commencent Soutenir cela. Firefox 3.5, Opera 10 et safari devraient prendre en charge la police de police de style CSS3 à l'aide de polices TTF, Chrome ne comporte pas la prise en charge de Safari pour l'emboîtement de la police CSS3 pour une raison quelconque.

Votre problème dans le rendu de votre police sur IE8 peut être lié au fait que la deuxième déclaration de police de police définit la même famille de polices que le premier - et le remplace ainsi - mais ne déclare aucune police d'électricité que c'est-à-dire peut utiliser.

Je vous suggère d'utiliser une définition de police de police unique telle que; xxx

alors c'est-à-dire peut essayer d'utiliser la police EOT . D'autres navigateurs (mais pas chromés apparemment) tenteront d'utiliser l'EOT, puis retomberont au rendu TTF. Cela suppose bien sûr que c'est-à-dire que c'est-à-dire peut gérer la définition de "sources alternatives", que je ne suis pas sûre qu'elle le fait - le @ la documentation de police de police dans MSDN ne fait pas référence à cela.


0 commentaires

1
votes

Bien que l'utilisation de @ font-face n'est toujours pas recommandée en raison d'un manque de soutien généralisé, il existe un moyen d'utiliser des polices personnalisées dans les navigateurs modernes (la plupart d'entre eux). Cependant, n'oubliez pas de fournir une solution de sauvegarde pour une dégradation gracieuse dans les navigateurs plus anciens.

Quoi qu'il en soit, vous devriez vérifier Ce tutoriel pour plus de détails.


0 commentaires

0
votes

Tout d'abord, essayez d'utiliser des chemins absolus: xxx


0 commentaires

10
votes

Pour que la fonction de police embarquée fonctionne (dans les navigateurs supportant), vous devez également appliquer la nouvelle famille de polices à un sélecteur de style.

par exemple xxx

ne fera pas le tour, même s'il va effectivement charger une police (si c'est une URL valide) - parce que tout ce que nous 've fait est chargé la police. Nous devons toujours l'appliquer, de sorte que xxx

charge les deux charge la police personnalisée et l'applique à votre sélecteur CSS (dans cet exemple, H1).

Vous voudrez presque certainement lire un didacticiel sur @ font-face (Krule a déjà suggéré un bon ci-dessus avec des liens vers des polices libres pouvant être utilisées avec elle.) Idem à tous les avertissements ci-dessus À propos de la dégénérescence gracieuse, car ce n'est toujours pas une fonctionnalité universellement prise en charge.


1 commentaires

Comment utiliser la police arabe en utilisant ci-dessus?



0
votes

Je pense que vous devriez avoir une seule déclaration de la police avec de nombreuses sources pour une famille de police. Il semble que c'est-à-dire n'aime pas votre déclaration. Le code de l'article mentionné ( http://randsco.com/index.php/ 2009/07/04 / cross_browser_font_embedding ): xxx

La première source doit être pour le fichier eot. La deuxième source devrait être pour le fichier TTF et commencer par le nom de police local. C'est une sorte de hack. Le deuxième attribut source semble invalide pour IE, ce navigateur utilise-t-il le premier. Pour les autres navigateurs, les deux sont valides, mais seulement le dernier est utilisé.

pour convertir les fichiers TTF en EOT I utilisé ce petit programme: http://code.google.com/p/ttf2eot/ < p> La méthode doit être prise en charge par les navigateurs suivants:

  • Firefox 3.6 +
  • Internet Explorer 4 +
  • Opera 10.00 +
  • Chrome 4.0 +
  • Safari 3.1 +

    J'ai fait un test et cela fonctionne pour moi. Le chrome 2 est probablement trop vieux.


1 commentaires

Cela ne fonctionne pas. S'il vous plaît voir ma réponse à un moyen plus précis d'intégrer les polices pour les navigateurs IE et non, à la fois.



0
votes

Vous devrez bloquer pour prendre en charge les polices embarquées dans les navigateurs IE et les navigateurs non-IE.

Le bloc IE devra venir en second et être contenu dans un commentaire de sélecteur IE. P>

Par exemple : P>

<!--[if IE]>
<style type="text/css">
     @font-face
     {
          font-family: 'myFont';
          src: url('/location/of/myFont.eot');
     }
</style>
<![endif]-->


0 commentaires

0
votes

Je reconnais que cette question est plutôt vieille, mais il y a maintenant une grande API de police de Google que l'on peut à: https://developers.google.com/webfonts/


0 commentaires