Helvetica Neue base rendu problème avec Firefox/Mac

Considérez ce HTML:Helvetica Neue base rendu problème avec Firefox/Mac

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<style type="text/css"> 
body { 
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
    line-height:20px; 
    font-size:14px; 
} 
.a { 
    float:left; 
} 
.b { 
    font-weight:bold; 
} 
</style> 
</head> 

<body> 
    <div class="a">something1</div> 
    <div class="a b">something2</div> 
</body> 
</html>

sur tous les navigateurs, mais Firefox/Mac, il rend correctement, i.e. gras et non gras sont sur la même base.

Sur Firefox/Mac, il existe une différence de base 1px entre les textes en gras et non gras. Voir ci-dessous pour la capture d'écran. À gauche, Safari 3.2.3, à droite, Firefox 3.0.10.

alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png

Est-il possible de résoudre ce problème par exemple, avec un peu de CSS, autre que d'aller pleurer tranquillement dans le coin et utiliser Arial (que je veux pas faire - je reste avec Helvetica Neue si je pouvais).

Source

2009-05-27 Jaanus

Switched la police Helvetica (non Neue) et il semble être le poids normal c'est le problème, pas t il est audacieux. –

Hmm ... quand je passe à Helvetica, il ne semble pas y avoir de problèmes de base ... Helvetica Neue est donc le coupable? – Jaanus

À droite, mais lorsque vous appuyez sur Rafraîchir, le poids normal augmente légèrement, tandis que le gras ne fait que remonter un peu, ce qui suggère qu'il a un problème de rendu. –

Cibler la hauteur de ligne peut résoudre ce problème, mais vous ne savez pas si c'est le coupable. Si vous avez CSSEdit (ou rafraîchissez beaucoup), vous pouvez regarder le comportement en incrémentant la ligne-hauteur 1px à la fois.

La taille de police 14px le rend presque impossible. FF laissera tomber l'élément en gras 1 pixel à certaines hauteurs de ligne et le safari le lâchera exactement à l'opposé! (c'est-à-dire 20px safari en hauteur de ligne laisse tomber le pixel gras 1 tandis que firefox rend normalement, le contraire de votre problème).

Sauf à une hauteur de ligne de 3 pixels, les deux rendent le même. Mais une hauteur de ligne de 3 pixels est étrange, vous devrez peut-être adapter en ajustant la marge supérieure si elle gâche votre mise en page.

body { 
    font: 14px "Helvetica Neue"; 
} 

.b { 
    font-weight: bold; 
} 

.a { 
    line-height: 3px; 
    float: left; 
    margin-top: 9px; 
}

à une taille de police de 13px tout rend le même dans les deux à une hauteur de ligne de 21px (qui est plus proche d'une hauteur de ligne régulière.

Jouer avec différentes tailles de police et ligne- hauteurs Je suis sûr que vous trouverez ce dont vous avez besoin

Ou pirater, si c'est comment vous roulez.

body { 
    font: 14px "Helvetica Neue"; 
} 

.b { 
    font-weight: bold; 
} 

.a { 
    line-height: 21px; 
    float: left; 

} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 

/* Safari 3.0 and Chrome rules here */ 

    .a { 
     line-height: 20px; 
    } 

}

Source

2009-05-27 23:28:08

Merci. Grande enquête. – Jaanus

Mon réaction intestinale est que les flotteurs se comportent mal. Je n'ai pas de Mac, mais pouvez-vous essayer de le faire:

<span>something1</span><span class="b">something2</span> 
<span class="a">something3</span><span class="a b">something4</span>

Et de voir si leurs lignes de base sont correctes?

Source

2009-05-27 21:03:01 varl

Je viens de vérifier que c'est le flotteur. J'ai changé les divs en travées, enlevé le flotteur, et le gras a chuté d'un pixel. –

Ok. Toute cette histoire est juste devenue beaucoup plus étrange. Voir http://www.jaanuskase.com/stuff/hnffrendering.zip - il a la combinaison ci-dessus plus quelques autres. Vous pouvez voir à la fois le code HTML et son rendu. Je suis complètement mystifié quant à ce qui se passe à l'image 5 - apparemment si vous avez ou non un texte fort dans l'un des divs n'affecte pas la ligne suivante, mais affecte la ligne flottante ci-dessous. Alors oui, quelque chose à propos des flotteurs. (Hélas, comment puis-je définir des marges de texte verticales sans flottants?) – Jaanus

Que voulez-vous dire par des marges de texte verticales? La règle "margin-top:" est respectée.Si vous voulez deux éléments l'un à côté de l'autre sans les retirer du flux normal, vous pouvez toujours utiliser des éléments en ligne comme span ou forcer vos éléments de bloc à agir comme en ligne avec "display: inline". – varl

Helvetica Neue base rendu problème avec Firefox/Mac

Répondre

Questions connexes