28172 sujets

CSS et mise en forme, CSS3

Bonjour,
afin d'utiliser une police dans mon site web, je code le CSS de la manière suivante :

@font-face
{
  font-family : "blablabla";
  src: url('../fonts/Amaze_Normal.ttf'),format('truetype');
}


body {
  margin: 0;
  padding: 0;
  background: white none repeat scroll 0% 50%;
  color: black;
  font-size: 80%;
  font-family : "Ma Police",Verdenna,Arial,Helvetica,serif;


L'arborescence est la suivante :
la page index (celle qui doit afficher la police) est à la racine (index.php). On utilise un template basé dans le répertoire "templates". Les CSS sont dans un répertoire "styles" et les polices dans le répertoire "fonts".
Lors du chargement de la page, la police n'est pas prise en compte, ni dans IE8, ni dans FF4.
Firbug m'indique ceci concernant le CSS de la page :

@font-face {
    font-family: "blablabla";
}
#header {
    height: 150px;
}


On ne voit donc pas apparaitre la source de la font.
Par contre, la font étant installée sur mon PC, si je met amaze directement dans font-family du body, ca passe (mais c'est pas ce que je veux, CQFD Smiley cligne );) )
Quelqu'un peut 'il m'aider à trouver d'ou vient le souci ?
Merci de votre aide
Guillaume C
Modifié par Guillaume C. (14 Jun 2011 - 20:34)
Oups, je viens de me relire..
Lire
font-family : "Ma Police";
au lieu de
font-family : "blablabla";
Dans le font-face...
J'ai modifié le src par
src: url('./fonts/Amaze_Normal.ttf'),format('truetype');


Sans changement...
Je suis ensuite allez voir sur font squirrel, télécharger un kit avec cette police, tout fonctionne.
Je déplace les fonts dans un répertoire 'fonts' aussi, modifie leurs liens en conséquence, ca fonctionne.
Je copie leur répertoire "fonts" à la place du mien, recopie le code, et patatra, ca fonctionne plus...
Bon, après plusieurs tests, cela fonctionne comme cela :

@font-face {
    font-family: 'AmazeNormal';
    src: url('../fonts/amaze_normal-webfont.eot');
    src: url('../fonts/amaze_normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/amaze_normal-webfont.woff') format('woff'),
         url('../fonts/amaze_normal-webfont.ttf') format('truetype'),
         url('../fonts/amaze_normal-webfont.svg#AmazeNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}


Mais si je ne laisse que le font en ttf, ca ne marche pas.
Pourquoi ??
Guillaume C. a écrit :
Mais si je ne laisse que le font en ttf, ca ne marche pas.

Pas mal d'explications possibles.

- Déjà, IE8 ne lit pas les fontes en TTF, uniquement en EOT. IE9 lit aussi le format WOFF implémenté dans tous les navigateurs récents.
- Ne pas hésiter à valider le code CSS... dans ton code, la virgule est à priori en trop: src: url('../fonts/Amaze_Normal.ttf'),format('truetype');
- Lorsque les fichiers sont envoyés depuis un serveur web, il faut faire attention au type MIME envoyé (en-tête HTTP Content-Type), par souci de sécurité certains navigateurs peuvent bloquer des ressources envoyées avec le mauvais type MIME.
Bonjour, je valide toujours, mais quand tout est opé.
Que ce soit CSS ou HTML (j'aime la petite icone dans mes sites web Smiley cligne Smiley cligne )
J'avais viré la virgule, sans résultat probant non plus.
Pour le content-type, j'ai ceci :
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

Je pense que cela doit venir de la.
Car en effet, en mettant toute la collection, j'ai bien ma police qui s'affiche dans tout mes tests.
Pour info, je tourne en local, sur WAMP 2.1.
Merci de votre aide Smiley cligne
Guillaume C. a écrit :
Bonjour, je valide toujours, mais quand tout est opé.

C'est prendre les choses à l'envers. La validation est un outil, ça permet notamment de repérer des erreurs de syntaxe telles qu'une virgule en trop. Si tu attends d'avoir un rendu correct pour valider, alors que le validateur pourrait te signaler une erreur de syntaxe qui empêche ton rendu d'être correct, tu es bloqué. Smiley cligne

Pour le Content-Type, je parlais des en-têtes HTTP des fichiers TTF (et EOT, WOFF, etc.) eux-mêmes. À lire: Voir et modifier les en-têtes HTTP.

Guillaume C. a écrit :
j'aime la petite icone dans mes sites web

C'est un peu has been, mais pourquoi pas. Smiley smile
a écrit :
C'est prendre les choses à l'envers. La validation est un outil, ça permet notamment de repérer des erreurs de syntaxe telles qu'une virgule en trop. Si tu attends d'avoir un rendu correct pour valider, alors que le validateur pourrait te signaler une erreur de syntaxe qui empêche ton rendu d'être correct, tu es bloqué.


C'est noté Smiley cligne

a écrit :
Pour le Content-Type, je parlais des en-têtes HTTP des fichiers TTF (et EOT, WOFF, etc.) eux-mêmes. À lire: Voir et modifier les en-têtes HTTP.


J'y vais de ce pas.

a écrit :

C'est un peu has been, mais pourquoi pas.


Merci Smiley cligne Smiley cligne
A 34 ans, je me savais has been mais à ce point Smiley cligne Smiley cligne Smiley cligne Smiley langue
C'était surtout pour dire que je valide CSS et HTML.
Mais c'est has been, je ne les mettrais plus. Smiley lol