polices de calligraphie sur un site Web

Question

Si je veux avoir du texte apparaître dans une police de calligraphie, comment puis-je savoir comment il va rendre l'ordinateur des utilisateurs. Comment puis-je savoir quelles polices cette personne a sur l'ordinateur ou est-ce important? de bons exemples de faire ça en css?

Serais-je mieux de mettre quelque chose ensemble dans photoshop et d'enregistrer comme une image?

Answer 1

Si vous utilisez la police pour les en-têtes et les éléments de page de fantaisie qui ne vont pas changer souvent j'utiliserais une image de photoshop.

Si vous voulez utiliser la police pour le corps principal du texte, je suggère de définir une famille de polices en CSS. Je trouverais la police que vous voulez utiliser sur votre système d'exploitation actuel si c'est une police que vous avez trouvé et que les chances de téléchargement sont l'utilisateur final ne l'aura pas. Si c'est une police système ou une police qui vient avec une application logicielle majeure comme MS Word il y a de fortes chances qu'elle sera disponible sur la machine des utilisateurs finaux. Une fois que vous avez trouvé la police que vous souhaitez utiliser, je ferais un peu de recherche et de voir si vous pouvez trouver quelque chose de similaire dans une saveur de mac et même une saveur Unix.

body 
{ 
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman" 
} 

Il est toujours bon d'utiliser une police de sauvegarde que vous savez travailler sur la machine de quelqu'un le navigateur choisira le plus applicable dans la liste commençant par la première police a déclaré son chemin jusqu'à ce qu'il trouve une correspondance.

Answer 2

Vous pouvez intégrer des fichiers de polices TTF dans CSS.

Un bon exemple est here:

/* DejaVu Sans 2.24 
    http://dejavu.sourceforge.net/wiki/index.php/Main_Page */ 
@font-face { 
    font-family: "DejaVu Sans"; 
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]") 
} 

Edit:

Note: Ceci ne fonctionne que dans Firefox, Chrome et peut-être.

Microsoft a publié un document sur la façon d'incorporer des polices dans une page Web en utilisant le format Embedded OpenType. Il consiste à convertir la police à un fichier EOT puis référencer dans la feuille de style en utilisant la syntaxe suivante:

@font-face { 
    font-family: Piefont; 
    font-style: normal; 
    font-weight: normal; 
    src: url(PIE0.eot); 
} 

(Ceci a été tiré d'une démo en ligne officielle here). Basé sur la réponse de Boldewyn ci-dessous, je parie que vous pourriez également utiliser un fichier TTF dans le src: paramètre.

Answer 3

J'ai tendance à utiliser @font-face sur mes sites personnels ... mais cela dépend de ce que vous faites pour cela.

D'abord .. les questions. Est-ce du texte statique ou s'agit-il de titres de publication, etc.

Si du texte statique, comme le titre principal, est associé à une image.
<h1><strong>Same text as the image(seo)</strong></h1>

et dans le h1 {css background: url (/ images/use-the-texte comme image-name-for-seo.png) pas de répétition en haut à gauche; largeur: 100px; hauteur: 30px;}/* largeur et hauteur étant image largeur/hauteur / h1 forte {position: absolue; gauche: -8000px;}/ fait en sorte que le texte ne s'affiche pas sur l'image, mais pas cachez-le à des fins de référencement/lecture d'écran */

Si vous parlez de quelque chose qui doit être dynamique, et que vous avez besoin de plus que de la dégradation gracieuse, optez pour sIFR. Si degredation gracieux est acceptable, aller avec @font-face

Answer 4

Pour ajouter aux @font-face supporters: Paul Irish a publié une version de cette déclaration CSS, qui fonctionne dans tous les navigateurs les plus récents ainsi que tous les IEs vers le bas à IE5.5. Cependant, vous avez besoin de la police en tant que formats TTF et EOT pour que cette technique fonctionne.

Si la licence de votre police le permet, il y a beaucoup d'outils pour convertir entre les formats. Juste google pour ça.