Este es bastante especificar: especificar la fuente ttf representación font-weight:bold incorrectamente en iOS mobile safari, abra el sitio de demostración con el iphone/ipad con iOS 4.2/4.3 Beta 3 o superior:

(esto es Reenie+Gorro de fuentes de google)

http://jsbin.com/ojeqe3/16/

Captura de pantalla

Que ver la fuente en negrita mira doble prestados. Esto no es significativo para la pequeña y mediana tamaño de la fuente, pero muy significativa para grandes font-size /zoom en

Mi amigo le informe de este error de apple. Sin embargo, nada de lo que él puede hacer para solucionar el error? (matar el texto-ajuste de no es ACEPTAR)

Actualización:
Este es no se fija en iOS5.

La mejor solución yo sé que el problema va a ser

  1. Uso font-weight:normal (como se muestra en la demo)
  2. Utilizar -webkit-text-stroke o text-shadow para que se vea «negrita» (además de iPad sólo css – cuerpo prefijo añadido por js, no sólo la consulta de medios de comunicación)
  • Bueno…si es un bug, es un asunto de la piratería a su alrededor para ver si usted puede disparar un interruptor en alguna parte que deja este de disparo – probablemente me trate de combinaciones de webkit efectos de texto a ver si tengo suerte (como la fuente de suavizado, text-shadow con una sombra transparente, un -webkit trazo de texto etc.)
  • Por suerte, este no es tan importante si usted no utiliza la media de tamaño de fuente y desactivar el zoom…gracias por la sugerencia 🙂
  • +1 buena pregunta. Mismo problema. Estoy sorprendido de que no haya más votos.
  • este problema es más prominente cuando se aplica text-shadow con una extensión que se filtra alrededor de todos los rincones de las letras.
  • Esta no es fija a partir de la fecha de este comentario. Han sido años. Apple realmente ha caído. Veo que tienen menos problemas con IE 10 que voy a hacer con Safari. WTF.
  • Safari es el nuevo IE6″, y todos nosotros sabemos el Móvil de Safari en iOS 7 es la peor Safari desde siempre.

InformationsquelleAutor vincicat | 2011-02-21

4 Comentarios

  1. 34

    Tenido el mismo problema con un h1 heredar la font-weight: bold; de una clase padre. Sólo sobrescribir el estilo heredado con un font-weight: normal;

    • totalmente fija el doble de procesamiento para mí.
    • Esta es la respuesta correcta. Puede usted por favor marca?
    • No es la respuesta correcta o la revisión – a pesar de que se detiene el doble de representación también se detiene la capacidad que tiene el texto en negrita con font-face. El usuario quiere tener el texto en negrita, con letra sin este hacky doble representación.
    • esto se ha solucionado el problema para mí, pero sólo porque no tenía la necesidad de varios pesos de la fuente. sería agradable si había una solución para permitir font-weight:bold a trabajar. Supongo que tendremos que esperar para que el error sea corregido…
    • Esto sólo me salvó, gracias! Nota para aquellos que están tratando de añadir más peso de la fuente a su ya personalizado font-face: elija una fuente que tiene el espesor que usted está buscando, no se hackear a alguien de la fuente porque eligió mal – su no va a funcionar en todas partes como te la imaginas. Elegir de nuevo.
    • Esta NO es la respuesta correcta. Por favor, mire Gerry Straahof y Spoike respuestas a continuación. Están en lo correcto.
    • Esto puede solucionar el problema en este caso específico, pero no explica ninguna de las razones por las que se produce o cualquier variaciones etc – y es bastante inútil, tan lejos como ayudar a otros en el futuro. ver a @Spoike ‘s respuesta. Es muy claro y conciso.

  2. 27

    Parece que el Móvil de Safari tiene un buggy forma de representación imitación de estilos con la fuente caras. Para la negrita será el doble de la de texto y desplazamiento, y con la mayoría de las fuentes que pasaría desapercibido, pero con delgadas de los tipos de fuentes se verá como visión doble.

    En su caso, el Reenie Beanie hace no incluyen un estilo audaz, y si usted está usando como título, sin cambiar el font-weight a normal o 400 va a hacer que la negrita peso «de imitación de estilo».

    Por favor, tenga en cuenta que el uso de imitación de estilos es generalmente buggy en algunos navegadores y no sólo en Mobile Safari.

    Solución 1. El font-weight

    Así que la mejor solución es cambiar el font-weight a la que Fuentes de Google proporcionar, solución rápida a continuación:

    h1, h2, h3, h4, h5, strong, b { 
        font-weight: 400; 
    } 
    /* or font-weight: normal */ 

    La solución 2. Utilice una fuente que proporciona la negrita/cursiva estilo que desea

    La otra solución es elegir una fuente de una web de fuentes de archivo que hace incluyen un estilo de negrita. Alternativas de Fuentes de Google que se parecen mucho a la Reenie de Gorro y son «más audaz» podría ser, por ejemplo,Gochi Mano, Sunshiney, o Marcador Permanente.

    La solución 3. Falso de la falsa utilizando otros medios

    Si realmente insisten en querer una imitación de estilo audaz puede intentar utilizar una fina text-shadow o trazo de texto.

    • Esta es la respuesta correcta a la gente. Gracias, Spoike. Votación de esta respuesta para ayudar a otros.
    • Sí esta es la respuesta correcta! Sería bueno de @vincicat a aceptar esta respuesta.
    • Esta es la respuesta. Estar enojado en el safari por no saber cómo «falso» una audaz peso de una fuente sin un audaz peso, es tonto. @vincicat – usted debe aceptar esta respuesta y guardar los futuros visitantes a la vez.
    • Esto no sólo resolver mi whacky doble tema de la fuente que estaba confundido acerca de, explicó por qué la fuente fue representado de esa manera y enseñó una manera diferente de pensar acerca de ello. Damos por sentado que podemos simular una más gruesa de la fuente, a veces, incluso cuando no tenemos un 700 peso. Excelente respuesta.
  3. 7

    no utilice el ‘audaz’ o ‘negrita’ de la etiqueta. no son necesarios si usted está usando un específico ponderado webfont.

    Yo tenía el mismo problema. Se me pasó cuando me he quitado ninguna mención de la fuente-peso.

    • Esta es la respuesta correcta! el iPad 2 tiene problemas de conversión de peso normal webfonts en «falso» en negrita. Si intenta hacer un peso normal en un audaz peso (conocido como «falsa negrita»), el iPad 2 tiene un «doble representación» error donde se representa la fuente a la izquierda y a la derecha-la mayoría de los límites de lo que sería una fuente en negrita, pero no llene el espacio en el medio. Por lo que da la ilusión de la fuente está representado dos veces.
  4. 6

    Trata de aplicar esta regla css:

    -webkit-font-smoothing: antialiased;
    • corregido un raro grueso de representación problema que tenía con un tipo de letra de la regla
    • lamentablemente esto no resolver el doble problema de render
    • La solución es utilizar un tipo de letra negrita. el iPad 2 tiene problemas de conversión de peso normal webfonts en falso fuentes en negrita. Ver Gerry Straathof y Spoike respuestas a continuación.

Dejar respuesta

Please enter your comment!
Please enter your name here