28234 sujets

CSS et mise en forme, CSS3

[Résolu] Font-face mystère

bonjour
et d'abord en grand bravo, je débute (2 semaines avec joomla) et les tutos alsacréations sont devenus mon livre de chevet.

voila, j'ai un petit soucis avec un font-face. Vu que j'apprends, je tourne en local. J'ai voulu essayer le @font-face. Cela fonctionne à merveille sous IE, mais sous firefox, la police s'affiche, mais apparaît une marge invisible au dessus du texte qui me décale tout le site vers le bas...et je n'arrive pas à comprendre le pourquoi du comment?

la partie PHP à laquelle est appliquée la classe:
[PHP]
<div id="top">
<p class="andy">Tararata</p>
</div>
[PHP]

et mon CSS

@font-face {
	font-family: 'andy';
	src: local('Andy'), local('Andy-Bold'), url('../fonts/Andyb.ttf'), url('../fonts/Andyb.woff') format('woff') format('truetype'); 
}
.andy {
 font-family:andy, sans-serif;
 font-size:26px;
text-align:center;
color:#000000;
 }
html {
text-align:center;
}
body {
padding: 0px;
margin: 0 auto;
background: #043231 url(../images/fnd.jpg);
color: #FFF;
font-family:  Arial, helvetica, tahoma, sans-serif; 
font-size : 14px;
text-align: center; 
}

#global {
position:absolute; 
margin: 0 auto;
width: 960px;
left: 50%;  
top: 50%; 
margin-top: -325px; 
margin-left: -480px; 
text-align: center;
height:650px;
border: 1px solid #ffffff;
}

  
#header {
	height:150px;
	width:900px;
        margin: 0 auto;
	background: #666;
}
#top {
	background:none;
    margin: 0 auto;
	height:60px;
	width:600px;
}
#bodymiddle {
	background:#666;
	width:960px;
	height:400px;
    margin: 0 auto;
}
#bas {
	width:960px;
	height:30px;
    margin: 0 auto;
    padding-top: 10px;
 	background: transparent;
	text-align: center; 
}


pour essayer, j'ai pris un kit de chez fontsquirrel ou il n'y a qu'à inclure et recopier...idem

si quelqu'un pouvait m'expliquer mon erreur, j'en serai bien heureux
merci
ledarius
Modifié par dariusetmaya (17 Mar 2010 - 21:03)
Sans plus de details , je pense qu'il s'agit probablement des mecanisme de "fusion de marges" .

test ceci : 

p.andy {margin:0;}


GC
bonsoir
merci gc-nomade, un très bon début Smiley biggrin
cela ne résout pas totalement mon problème ...mais presque
plus que quelques pixels qui trainent sous firefox
je vais creuser du côté de ces fusions de marges que je ne connaissaient pas.
dès que j'aurais trouvé je vous fait part
le darius
Une supposition en l'air: tu n'as pas spécifié de line-height et donc Firefox applique un paramètre de hauteur de ligne compris dans la fonte (tandis qu'IE ignorerait ce paramètre... à voir).

Un line-height:1.2 (correct pour un titre en général) peut être pas mal.
Ensuite, si tu as un décalage d'un ou deux pixels, c'est normal, tu ne peux pas contrôler le rendu au pixel près. Smiley cligne
Sujet clos
Aller à