Comment spécifier les tailles de police en CSS pour qu'elles correspondent aux maquettes et permettent le redimensionnement?

StackOverflow https://stackoverflow.com/questions/213128

  •  03-07-2019
  •  | 
  •  

Question

Nous rencontrons des problèmes pour définir les tailles de police. Si nous spécifions les tailles de police à l'aide de pt, elles ne se ressemblent pas toujours entre navigateurs / plates-formes. Si nous spécifions les tailles de police à l'aide de px, les utilisateurs d'IE6 ne peuvent pas redimensionner le texte.

Était-ce utile?

La solution

Un article sur A List Apart (novembre 2007) a exploré cela en profondeur dans divers navigateurs et conclu:

  

Le dimensionnement du texte et de la hauteur de ligne dans ems, avec un pourcentage spécifié sur le corps (et une mise en garde facultative pour Safari 2), s'est avéré fournir un texte précis et redimensionnable sur tous les navigateurs couramment utilisés de nos jours. C’est une technique que vous pouvez mettre dans votre trousse et l’utiliser comme pratique recommandée pour dimensionner le texte en CSS qui satisfasse à la fois les concepteurs et les lecteurs.

Ils ont fourni des captures d'écran sur l'aspect de cette technique. dans les navigateurs les plus 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]-->

Autres conseils

contrairement à ce que d’autres ont répondu, vous ne devez jamais utiliser de pixels pour les tailles de police. Internet Explorer 6 a toujours un gros morceau du gâteau du navigateur et il ne veut absolument pas redimensionner le texte spécifié avec une taille de pixel (comme mentionné dans la question). vous devriez toujours vous efforcer d'utiliser & "; em &"; s.

J'utilise une technique similaire à celle suggérée par d'autres, dans laquelle i " réinitialiser " les styles css sur tout le tableau pour supprimer les incohérences du navigateur en ce qui concerne le dimensionnement et le positionnement des polices. J'aime les la réinitialisation du rechargement par eric meyer comme base. vous pouvez également utiliser la méthode yahoo reset css pour explorer toute cette bibliothèque.

Ensuite, j'utilise le modèle de typographie css sain d'owen briggs . vous remarquerez peut-être qu’elle n’a pas été mise à jour depuis 2003 mais qu’elle est toujours aussi solide que les navigateurs actuels.

Une fois que vous avez obtenu cette base, il vous suffit de changer le pourcentage de police sur la balise <body> pour que toutes les polices de votre site Web soient facilement redimensionnées de la même manière.

pour les impatients, voici la réinitialisation de CSS et la typographie de owen briggs css écrasés (analysés dans cet excellent formateur css ): 

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;}

Vous devez toujours utiliser des unités relatives pour les tailles de police, telles que em.

http://developer.yahoo.com/yui/fonts/#fontsize (edit: Je suppose que cela suppose leur CSS de base, mais cela suppose une taille de base de 13 pixels; je pense même qu'IE redimensionne correctement un texte de la taille en pourcentage dans lequel les pourcentages sont mesurés par rapport à une taille en pixels.)

Cela dit, vous n'obtiendrez jamais une taille de police parfaite, en particulier si vous essayez de faire correspondre une maquette graphique, mais que même d'un navigateur à l'autre, le rendu du texte diffère.

Vous aurez toujours du mal à faire correspondre les maquettes, sauf si vous utilisez px. br> Je ne pense pas que l'utilisation de px pour vos pages Web présente un problème particulier. D'autant que presque tous les navigateurs modernes (à l'exception des webkit) utilisent le zoom plutôt que le redimensionnement du texte par défaut.

Je vais peut-être m'en tenir à ce que suggère Nathan, car cela vous permet une plus grande agilité de conception, car vous pouvez rapidement redimensionner la taille des polices du site entier en ne modifiant que l'une d'entre elles. Mais si vous êtes paresseux ou si vous le souhaitez vraiment, vous n’avez pas à craindre le px.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top