¿Cómo puedo hacer que las fuentes se procesen de la misma manera en diferentes navegadores web?

Estoy creando un sitio web para un cliente, y esperábamos usar texto plano, no imágenes en la barra de navegación. La fuente que estamos usando es Century Gothic (creo que esta fuente está disponible en la mayoría de las PC y Mac). El problema es que en diferentes navegadores la fuente se vuelve significativamente diferente. En Chrome conseguimos que se vea como queremos, pero en firefox el texto es más pequeño y audaz.

Además de escribir JavaScript específico del navegador para alterar las propiedades de la fuente, ¿hay alguna otra opción para estandarizar la forma en que las fuentes se representan en el navegador? Tal vez alguna biblioteca o API? ¿Quizás es una cuestión de ser más específico al declarar las propiedades de la fuente? Sinceramente, estoy atascado y necesito ayuda.

website-design fonts cross-browser

— Zach Lysobey
fuente

Respuestas:

No va a obtener fuentes, y algunas otras cosas, para representar de forma idéntica en los navegadores. El manejo de las fuentes es un ejemplo perfecto. Sé que Safari en Windows le gusta poner texto en negrita por alguna razón. Lamentablemente, así es como funciona la web. La variedad de navegadores, sistemas operativos, monitores, procesadores gráficos, etc., significa que hay potencialmente miles o decenas de miles de formas diferentes en que una persona puede ver una página web. Entonces, al construir para el wbe, debe hacerlo sabiendo y esperando que su sitio no sea perfecto para todos. Esto no es impresión. Es la web salvaje salvaje.

— John Conde
fuente

Sí, parece que esta es la desafortunada realidad. Sin embargo, parece que debería ser posible que alguien escriba un fragmento de javaScript que haga que las cosas estén un poco más cerca de la normalización.

— Zach Lysobey

Desafortunadamente no es un problema de código sino un problema de software y hardware. Es la forma en que se desarrollan los navegadores y con la aceleración de hardware que viene empeorará (aunque sus fuentes se verán más suaves para aquellos que lo tienen habilitado).

— John Conde

Este artículo (y los otros de la misma serie) explican los problemas con gran detalle, si tiene curiosidad. blog.typekit.com/2010/12/17/…

— paulmorriss

Seleccioné tu respuesta como la mejor. Usted dice que no es un problema de código, pero ciertamente alguien podría escribir código para que una sola línea de texto se extienda a un ancho mínimo en píxeles. Eso en sí mismo mejoraría enormemente esta situación. Podría probar el ancho <p> representado y aumentar el espacio entre letras en consecuencia. ¿Tal vez?

— Zach Lysobey

@Zach: puede superar muchos obstáculos con un poco de planificación y codificación inteligente con seguridad. Pero al final solo podemos tener tanto control. Básicamente, si puede aceptar problemas como Safari en Windows y codificar el resto, debería hacerlo.

— John Conde

En realidad, hay un método para incrustar fuentes en tu CSS. Es extremadamente fácil. Consulte http://randsco.com/index.php/2009/07/04/p680 para obtener más información sobre cómo hacerlo. La desventaja de esto es que los navegadores más antiguos (pre ei 7 y ff 3, creo ...) no son compatibles con esto. Pero el número de personas que usan estos navegadores antiguos está disminuyendo rápidamente y todavía es posible especificar fuentes alternativas que funcionarían y generalmente están en la mayoría de las PC por si acaso.

Otro enfoque que no he usado implica el uso de flash. No tengo mucha información sobre esto aparte de lo que sé.

— Kenneth
fuente

En la nota css, asegúrese de usar solo fuentes que no violarán los derechos de autor si otra persona toma esa fuente, como cuando usa el método css, ese archivo de fuente está disponible para todos los que pueden acceder a su sitio web.

— Kenneth

Ese método Flash se llama sIFR . Tiene sus pros y sus contras también.

— John Conde

Como se mencionó en la otra respuesta, incluso utilizando este enfoque, habrá ligeras diferencias entre los navegadores y los sistemas, pero hay cosas que puede hacer con el resto del diseño de su sitio que pueden compensar y hacer que el sitio rinda bien en todas las configuraciones diferentes. Una cosa clave es tener múltiples navegadores y preferiblemente sistemas operativos para probar sus sitios.

— Kenneth

Como otros ya han señalado, no tenemos control total. Pero creo que vale la pena mencionar un par de cosas que encuentro útiles para lograr que los navegadores representen cosas de manera similar en general. Ambas son cosas "de vuelta a lo básico" que muchos de ustedes ya están haciendo, pero pensé que vale la pena mencionarlas ya que la base sobre la que construyen a menudo los prepara para el éxito o el fracaso ...

Restablecimiento de CSS. El concepto es simple: establece valores predeterminados de etiquetas HTML en una hoja de estilo para establecer un punto de partida común para la representación HTML. Aquí hay un artículo y un ejemplo: http://meyerweb.com/eric/tools/css/reset/

Declaración de Doctype. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
fuente