Comment empaqueter une police TrueType personnalisée avec un site Web afin que les navigateurs la rendent?

Question

Je développe un site web pour quelqu'un, mais ils veulent (insistent) que le titre soit dans une police non-standard. (Le client a toujours raison.) J'ai la police TrueType (.ttf) mais comment est-ce que je combine cela avec le site Web pour qu'il l'utilise?

J'ai essayé de le mettre dans le dossier Images et a essayé d'accéder à la feuille de style:

font-family:URL(Images/Arial_Rounded_MT_Bold.ttf) 

Mais cela ne fonctionne pas. Comment puis-je inclure une police non standard d'une manière qui va rendre? Au cas où cela serait utile, il s'agit d'un site ASP.NET 2.0.

Answer 1

Vous avez deux options:

1. créer une image au lieu d'utiliser le texte
2. Utilisez sifr pour convertir votre texte à la police .ttf

Answer 2

Il n'y a actuellement aucun moyen standard pour faire ce. Vous pouvez utiliser @font-face, mais ce n'est pas pris en charge dans tous les navigateurs. Comme Lance mentionné, this est un excellent endroit pour trouver une référence de support pour les principaux navigateurs.

Il y a un effort pour normaliser ce genre de chose. Le Web Open Font Format (WOFF) est un tel effort. Il semble que cela pourrait même être adopté par les principaux navigateurs à l'avenir. Nous devrons attendre et voir. Pour l'instant, le mieux que vous pouvez faire est de référencer votre police comme vous le feriez normalement, mais ajoutez une police par défaut (standard) après cela.

font-family: "Arial Rounded MT Bold", "Times New Roman", Serif 

Answer 3

Vous avez beaucoup d'options, aucune d'elles parfaite. Smashing Magazine a un excellent article sur les polices riches - la plupart d'entre elles impliquent le remplacement de flash/image.

http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/

Answer 4

Il y a une bonne quantité d'activité sur le thème de la distribution de polices ainsi que des sites Web, mais il est généralement au stade expérimental, et ne fonctionnera pas pour la grande majorité des navigateurs utilisés. Dans quelques années, vous pourrez peut-être faire cela, mais pour le moment vous devrez utiliser une image ou sIFR.

Answer 5

Convert your TrueType font into an Embedded OpenType font (il est facile!) De sorte que vous avez deux fichiers de police:

• Arial_Rounded_MT_Bold.ttf
• Arial_Rounded_MT_Bold.eot

Faites ensuite votre look CSS comme ceci:

@font-face { 
    font-family: 'Arial Rounded Bold'; 
    src: url('Arial_Rounded_MT_Bold.eot'); 
} 
@font-face { 
    font-family: 'Arial Rounded Bold'; 
    src: url('Arial_Rounded_MT_Bold.ttf') format('truetype'); 
} 
h1.title { 
    font-family: 'Arial Rounded Bold', serif; 
} 

Grâce à Internet Explorer, la spécification EOT ds doit être le premier, dans un bloc séparé @font-face et sans l'attribut format. Plus d'info here.

Profitez-en!