Consistente tamaño de fuente a través de navegadores (desarrollo web)
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.
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.
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.