Pregunta

Cuando la creación de páginas web ¿Cómo podemos lograr un tamaño de fuente consistente a través de los navegadores. He utilizado algo así como "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" en mi CSS, pero el texto se ve diferente en Firefox, IE, Google Chrome y Safari (y esto no es ni siquiera en diferentes plataformas). Básicamente en la misma máquina, que funciona con Windows Vista, aparece un aspecto diferente en diferentes navegadores.

¿Cómo puede ser fijado de modo que el tamaño del texto aparece igual en todos los diferentes navegadores.

¿Fue útil?

Solución

Utilice px (píxeles) en lugar de pt (puntos) para sus unidades de tamaño de fuente. A continuación, se le trata con tamaños de pixel.

Sin embargo ten cuidado, dependiendo de cómo se utiliza su sitio. Ha habido demandas (en los EE.UU.) a través de los problemas de accesibilidad en los sitios web que resultan de "hard-codificación" el tamaño de fuente.

Otros consejos

Usted tendrá que utilizar un Reset CSS para intentar conseguir un comportamiento coherente en todos los navegadores.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

  

Cuando la creación de páginas web ¿cómo lograr un tamaño de fuente consistente a través de los navegadores

En el texto principal del cuerpo, no lo hace. Algunas personas quieren más grandes de texto para que puedan leer con mayor facilidad; en su camino a su propio riesgo. Utilice tamaños de fuente relativos en unidades tales como ‘em’ o ‘%’.

Para pequeñas cantidades de texto de presentación donde se necesita el tamaño del texto para que coincida con los elementos de píxeles de tamaño de la pantalla, utilice la unidad ‘px’. No utilice ‘pt’ -. Que sólo tiene sentido para la impresión, que va a cambiar el tamaño más o menos al azar cuando se ve en pantalla

Puede aún así nunca obtener el texto exactamente el mismo tamaño porque las fuentes difieren en todas las plataformas y Lucida Grande y Helvetica un aspecto muy diferente, por supuesto.

Con estos dos ajustes, se puede llegar a exactamente el mismo aspecto de las fuentes:

font-size: 70%; // better than px

line-height: 110%; // required to make line heights the same

Probado: IE9, Firefox, Google Chrome

Esto es un no-respuesta, ya que hay maneras de lograr lo que necesita, pero no estoy muy versado en ellos. Comenzar con el "reset" que los marcos como modelo suelen proporcionar e ir de allí.

Por lo general, es mucho más fácil y más inteligente para tener diseños sean lo suficientemente flexibles para que las pequeñas diferencias entre los navegadores no juegan un papel demasiado grande.

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