¿Cómo se especifican los tamaños de fuente en CSS para que coincidan con las maquetas y permitan cambiar el tamaño?

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

  •  03-07-2019
  •  | 
  •  

Pregunta

Estamos teniendo problemas con la forma en que especificamos los tamaños de fuente. Si especificamos los tamaños de fuente usando pt, no siempre se ven iguales en los navegadores / plataformas. Si especificamos tamaños de fuente usando px, los usuarios de IE6 no pueden cambiar el tamaño del texto.

¿Fue útil?

Solución

Un artículo sobre A List Apart (noviembre de 2007) exploró esto en profundidad en varios navegadores y concluyeron:

  

Se demostró que el tamaño del texto y la altura de línea en ems, con un porcentaje especificado en el cuerpo (y una advertencia opcional para Safari 2), proporciona texto preciso y redimensionable en todos los navegadores de uso común en la actualidad. Esta es una técnica que puede poner en su bolsa de equipo y usar como una mejor práctica para cambiar el tamaño del texto en CSS que satisface tanto a los diseñadores como a los lectores.

Proporcionaron capturas de pantalla de cómo se ve esta técnica en los navegadores más populares. Aquí está el código que usaron: 

<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]-->

Otros consejos

al contrario de lo que otros han respondido, nunca debe usar píxeles para los tamaños de fuente. Internet Explorer 6 todavía tiene una gran parte del mercado del navegador y no cambiará el tamaño del texto especificado con un tamaño de píxel (como se menciona en la pregunta). siempre debe esforzarse por usar " em " s.

utilizo una técnica similar a la que otros han sugerido aquí por la cual <<>>; reset " los estilos CSS en todos los ámbitos para eliminar cualquier inconsistencia del navegador con el tamaño y el posicionamiento de la fuente. Me gustan los estilos restablecimiento de Eric Meyer recargado como base. también puede usar el método yahoo reset css si desea profundizar en toda esa biblioteca.

a continuación, uso plantilla de tipografía css de owen briggs . puede notar que no se ha actualizado desde 2003, pero sigue siendo absolutamente sólido con los navegadores actuales.

una vez que obtenga esta base, es una simple cuestión de cambiar el porcentaje de fuente en la etiqueta <body> que escalará fácilmente todas las fuentes en su sitio web de la misma manera.

para los impacientes, aquí está el reset de CSS de Eric Meyer y la tipografía de Owen Briggs CSS combinados (analizados a través de este excelente formateador 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;}

Siempre debe usar unidades relativas para los tamaños de fuente, como em.

http://developer.yahoo.com/yui/fonts/#fontsize (editar: creo que esto asume su CSS base, pero supone un tamaño base de 13px; creo que incluso IE redimensiona correctamente el texto de tamaño porcentual donde los porcentajes se miden contra un tamaño px.)

Dicho esto, nunca obtendrá un tamaño de fuente con píxeles perfectos, especialmente si intenta hacer coincidir una maqueta gráfica, pero incluso solo de navegador a navegador, las cosas diferirán en la representación del texto.

Siempre tendrás problemas para combinar maquetas a menos que uses px. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ < br> No creo que haya nada particularmente malo en usar px para tus páginas web. Sobre todo porque casi todos los navegadores modernos, salvo el kit web, usan el zoom en lugar del cambio de tamaño de texto de forma predeterminada.

Todavía podría apegarme a lo que sugiere Nathan, ya que le permite una mayor agilidad de diseño, ya que puede escalar rápidamente los tamaños de fuente de todo el sitio cambiando solo uno de ellos. Pero si eres flojo o quieres que sea perfecto, entonces no tienes que tenerle miedo a px.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top