Nous rencontrons des problèmes avec la façon dont nous spécifions les tailles de police. Si nous spécifions les tailles de police en utilisant pt, elles ne sont pas toujours identiques sur les navigateurs/plates-formes. Si nous spécifions des tailles de police utilisant px, les utilisateurs IE6 ne peuvent pas redimensionner le texte.Comment spécifier les tailles de police dans CSS pour qu'elles correspondent aux maquettes et permettent le redimensionnement?
An article on A List Apart (Novembre 2007) a étudié cette question en profondeur dans divers navigateurs et a conclu:
texte Taille et hauteur de ligne ems, avec un certain pourcentage sur le corps (et une mise en garde en option pour Safari 2) , a été montré pour fournir un texte précis et redimensionnable à travers tous les navigateurs couramment utilisés aujourd'hui. C'est une technique que vous pouvez mettre dans votre sac de kit et utiliser comme une bonne pratique pour la taille du texte en CSS qui satisfait à la fois les concepteurs et les lecteurs.
Ils ont fourni screen shots de l'aspect de cette technique dans la plupart des navigateurs populaires. Voici le code qu'ils ont utilisé:
<style type="text/css">`
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
Vous devez toujours utiliser des unités relatives pour les tailles de police, telles que em.
http://developer.yahoo.com/yui/fonts/#fontsize (modifier. Je crois que cela suppose leur CSS de base, mais il suppose une taille de base de 13px, je crois même IE redimensionne correctement le texte pour cent de la taille où les pourcentages sont mesurés par rapport à une taille px)
Cela dit, vous n'obtiendrez jamais de taille de police pixel-parfait, surtout si vous essayez de faire correspondre une maquette graphique, mais même juste navigateur au navigateur, les choses seront différentes dans le rendu du texte.
Vous aurez toujours du mal à faire correspondre les maquettes à moins d'utiliser px. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
Je ne pense pas qu'il y ait quelque chose de particulièrement faux avec l'utilisation de px pour vos pages Web. Surtout que presque tous les navigateurs modernes - sauf pour webkit - utilisent le zoom par opposition au redimensionnement de texte par défaut. Je peux toujours me tenir à ce que suggère Nathan, car cela vous permet une plus grande agilité de conception, car vous pouvez rapidement mettre à l'échelle les tailles de police de tout le site en n'en changeant qu'une seule. Mais si vous êtes paresseux ou si vous voulez vraiment sur place, alors vous n'avez pas à avoir peur de px.
Contrairement à ce que les autres utilisateurs ont répondu, vous ne devriez jamais utiliser de pixels pour les tailles de police. Internet Explorer 6 a toujours une grande partie de la tarte du marché du navigateur et il ne sera absolument pas redimensionner le texte qui est spécifié avec une taille de pixel (comme mentionné dans la question). vous devriez toujours essayer d'utiliser les "em". J'utilise une technique similaire à celle que d'autres ont suggérée ici, par laquelle je "réinitialise" les styles CSS sur toute la carte pour éliminer toute incohérence du navigateur avec le dimensionnement et le positionnement des polices. J'aime les styles eric meyer's reset reloaded comme base. vous pouvez également utiliser la méthode yahoo reset css si vous voulez creuser dans cette bibliothèque entière.
Ensuite, j'utilise owen briggs' sane css typography template. Vous remarquerez peut-être qu'il n'a pas été mis à jour depuis 2003, mais qu'il est tout à fait solide avec les navigateurs actuels. Une fois que vous obtenez cette base, il suffit de changer le pourcentage de police sur la balise <body> pour que toutes les polices de votre site Web puissent facilement être mises à l'échelle de la même manière.
pour les impatients, voici eric css de réinitialisation de meyer et de la typographie css de purée ensemble (analysés et traités par this excellent css formatter):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}
Les valeurs de la 'owen briggs propriété line-height' ne pas avoir besoin d'une unité spécifiée. La hauteur de ligne est déjà relative à la taille de police, donc une hauteur de ligne sans unité est la même que celle spécifiée dans ems. Donc 'line-height: 1.125em;' est le même que 'line-height: 1.125;' –