Rechercher : dans
Par :

Css @font-face avec police ttf

Dernière réponse le 26 aoû 2009 à 08:47:39 Luc, le 27 nov 2007 à 15:17:23 
 Signaler ce message aux modérateurs

Bonjour,
j'ai créé une page de mon site avec une police Chiller Normal (true type) dont le nom de fichier dans le répertoire des polices de mon pc est chiller.ttf.
Dans mes CSS j'avais
.Conteneur { (...) font-family: Chiller;}
et mon texte apparait bien sur mon PC avec cette police.

Mais cette police n'existe par sur d'autres PC. Il en va ainsi d'un autre PC que j'ai ici (PC2). Après m'être renseigné sur diverses pages, j'ai rajouté dans ma feuille de style, au début :
@font-face { font-family:"Chiller"; src:local("Chiller Normal"), src:url("styles/chiller.ttf") format("TrueType"); }
Dans le répertoire styles, j'ai mis le fichier chiller.ttf

Malheureusement, je n'arrive à aucun résultat sur PC2. Le texte n'apparait pas en police CHiller.

Quelqu'un aurait-il une idée du problème ?

Merci.

Configuration: Windows XP
Firefox 2.0.0.10 et IE7

Meilleures réponses pour « css @font face avec police ttf » dans :
[CSS] Créer facilement des CSS VoirUn outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle. La version Lite est gratuite. www.topstyle4.com
[Infographie] Utiliser une police TrueType sans l'installer VoirSi vous faites beaucoup de graphismes, vous devez sûrement avoir une collection de polices TrueType. Pour les utiliser, il faut les installer. Or Windows a vraiment du mal quand il y a beaucoup de polices installées. Et installer/supprimer des...
Installer les polices TrueType Microsoft VoirIl est possible de profiter des polices TrueType Microsoft sous Linux sans problème (Arial, Times New Roman, Courrier, Impact, Trebuchet MS...) Pour cela, il suffit de taper: sudo aptitude install msttcorefonts C'est tout ! Liste des...
Télécharger 3DHANDICAP.TTF VoirNombreuses sont les polices de caractères disponibles sur le web, mais rares sont celles en trois dimensions. 3DHANDICAP.TTF est une police de caractères en 3D. Il sera du goût de tous les graphistes et utilisateurs travaillant dans l’édition...
Télécharger Free&Easy Font Viewer VoirFree&Easy Font Viewer est un simple logiciel qui s’avère très utile pour la visualisation des polices de caractères sur le système. La plupart du temps, trier ou chercher les polices de caractères se trouvant sur le disque dur est un travail...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...
Fichier TTF VoirFormat TTF Un fichier TTF (True Type Fonts) est un fichier de police de caractères. Une police de caractères (appelée aussi police d'écriture ou fonte) permet de créer du texte possédant une apparence spécifique. Pour utiliser une telle police...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...

1

Christounet, le 27 nov 2007 à 15:28:59

Bonjour,

Je pense que tu dois d'abort convertir ton fichier ttf vers le format EOT (Windows) ou PFR (Mozilla/Firefox), en suivant le lien ci-dessous tu trouveras toute une documentation concernant l'ajoute de police dans les pages HTML ou fichiers CSS:

http://fr.selfhtml.org/internationalisation/polices_telechar­geables.htm

A plus

Répondre à Christounet

2

Luc, le 27 nov 2007 à 15:41:01

J'ai en effet vu ces méthodes mais j'ai vu plusieurs exemples où on semble utiliser directement ttf
Voir
http://fr.selfhtml.org/css/proprietes/fichier_police.htm
à la rubrique Autres mentions sur la source de police

Répondre à Luc

3

Christounet, le 27 nov 2007 à 15:51:56

Bonjour,

Sorry, je n'avais pas lu l'article jusqu'au bout, je pense alors que le problème vient de src:url("styles/chiller.ttf").

Je pense que tu dois rajouter "../" dans url, celà donnerait donc src:url("../styles/chiller.ttf") si Styles est un sous-répertoire du répertoires contenant ta page html

A plus

Répondre à Christounet

4

Luc, le 27 nov 2007 à 20:53:32

Je suis un peu dubitatif (j'ai essayé avec l'url complète correspondant à l'endroit pù est stocké le fichier sur le site) concernant cette solution mais j'essayerais... mardi prochain quand je serais de nouveau sur place.
Merci.
Luc

Répondre à Luc

5

Luc, le 4 déc 2007 à 13:50:36

Ça na marche pas mieux avec src:url("../styles/chiller.ttf")
Je me suis rabattu sur le logiciel Microsoft Weft qui m'a converti les polices pour IE et proposé directement le code CSS à utiliser. Très pratique et ça fonctionne sur le PC2 qui utilise IE. Reste à les convertir en pfr.
Merci.

Répondre à Luc

6

Mortimer59, le 13 jun 2008 à 03:05:34

En effet src: url ne fonctionne pas en css voir http://jigsaw.w3.org/css-validator/ pour voir tes erreurs.

Répondre à Mortimer59

7

Mortimer59, le 13 jun 2008 à 03:25:44

Utiliser url:("file://le dossier/police.ttf")

Répondre à Mortimer59

8

Exagone, le 3 jui 2008 à 16:23:14

Et on peux le faire avec les fichiers ".ttf" ???

Répondre à Exagone

9

Mortimer59, le 3 jui 2008 à 17:33:41
  • +3

Oui sans problème c'est ce que je fais sur mon site.

Répondre à Mortimer59

10

 Valéry, le 26 aoû 2009 à 08:47:39

À ma connaissance Firefox 2.0.0.10 et IE7 mentionnés ans le message ne prennent pas en compte @font-face : il faut Safari 4, Opera 10 ou Firefox 3.5

Répondre à Valéry