Problème avec le fichier @ font-face et le fichier .ttf

J'essaie d'utiliser @ font-face pour implémenter une police que j'ai téléchargée en ligne (http://www.losttype.com/font/?name=blanch) et j'ai des problèmes pour la faire fonctionner sur n'importe quel navigateur. Voici l'exemple de code que j'utilise pour tester la police.Problème avec le fichier @ font-face et le fichier .ttf

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
    <div class = "title"> 
     <p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p> 
    </div> 
</body> 
</html>

Et le fichier css:

@font-face { 
    font-family: Blanch; 
    src: url(‘BLANCH_CONDENSED.ttf’); 
} 
.title { 
    text-align:center; 
    font-family: Blanch, 'Helvetica Neue', Arial, Helvetica, sans-serif; 
    color:white; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
}

Je n'ai que le fichier .ttf. Quelqu'un peut-il expliquer pourquoi cela ne fonctionne pas?

Source

2013-05-24 GoodLuckGanesh

duplication possible de http://stackoverflow.com/questions/4267415/using-true-type-fonts-in-web-applications –

Quelle est la structure de votre fichier/répertoire? – gkalpak

J'ai le fichier html dans le même dossier que main.css. À l'heure actuelle, j'utilise simplement le code ci-dessus dans deux fichiers distincts pour essayer de faire fonctionner la police. – GoodLuckGanesh

Dans la construction url(‘BLANCH_CONDENSED.ttf’), les guillemets simples "intelligents" doivent être remplacés par des guillemets Ascii (simples ou doubles), par ex. url('BLANCH_CONDENSED.ttf').

Vous devez également utiliser FontSquirrel webfont generator ou un outil similaire pour générer différents formats de police pour couvrir tous les navigateurs.

Source

2013-05-24 19:45:17

Une fois que j'ai ajouté tous les différents formats de police, cela a semblé fonctionner! Merci pour le lien – GoodLuckGanesh

Cette .rar que vous avez publié n'a que des fichiers .otf, dans votre fichier CSS vous avez un .ttf. Est-ce que cela pourrait être le problème?

Source

2013-05-24 19:25:04 EvWill

Peut-être que j'ai fini par poster le mauvais lien, mais j'ai certainement un ttf. – GoodLuckGanesh

Problème avec le fichier @ font-face et le fichier .ttf

Répondre

Questions connexes