css - ¿Las declaraciones de @ font-face no funcionan en el navegador de Internet Android 4.3?

cross-browser android-4.3-jelly-bean

Question

Mi teléfono Samsung Galaxy S3 se actualizó recientemente de Android 4.1.3 a Android 4.3. Ahora, varios sitios web que diseñé y que probé en el navegador de Internet de Android no muestran las fuentes que he declarado con @font-face . ¿Qué necesito hacer para arreglar esto?

Uno de los sitios (versión de desarrollo): http://beta.kdfansite.com

Estos son algunos de los CSS relacionados con Open Sans:

@font-face {
    font-family: ''OpenSansSemibold'';
    src: url(''http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot'');
    src: url(''http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff'') format(''woff''),
         url(''http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf'') format(''truetype''),
         url(''http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

/* ... */

h2 {
    font-family: ''OpenSansSemibold'', Arial, sans-serif;
    /* ... */
}

Cada fuente que uso en el sitio se declara de manera similar. La declaración de Great Vibes (también en custom.css) para el mensaje "disfruta de tu viaje" es otra para comparar. Todas las fuentes se muestran correctamente en Chrome para Android y Firefox para Android en el mismo dispositivo, pero no en Internet de Android.

Necesito finalizar este CSS tan pronto como sea posible y estoy trabajando en este proyecto como voluntario (no pagado). Así que estoy buscando una solución rápida en lugar de una revisión de código. También soy un diseñador de UX, no un desarrollador web. Gracias por adelantado.

Edición: Hice una depuración adicional hoy en Edge Inspect CC y weinre, conectando tanto mi teléfono Android como mi iPad a mi computadora portátil. En Weinre, puedo cambiar las familias de fuentes en el iPad pero no en el teléfono. Puedo cambiar los colores de fuente en ambos dispositivos. Así que parece que el problema subyacente está relacionado con el hecho de que no puedo cambiar las fuentes de los valores predeterminados cuando uso un depurador remoto.

Answer 1

A partir de 2017, se puede usar la consulta @import proporcionada por fonts.google.com para la fuente que desee. Solo busque la (s) fuente (s) deseada (s), selecciónela, luego en la barra minimizada en la parte inferior de la pantalla, tendrá que seleccionar @import en la sección ''incrustar''. He adjuntado una captura de pantalla para referencia: https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

He tenido el mismo problema en el navegador predeterminado del dispositivo móvil, pero después de usar esa sintaxis, el problema se resolvió. No sé por qué, pero funcionó.

Answer 2

Anteriormente tuve un problema similar y lo resolví agregando font-weight: normal !important; a los elementos / texto que estaba usando la fuente. Creo que el problema fue que el peso de la fuente fue heredado por los elementos y esto causó que la fuente fallara. Espero que funcione :)

Así que en tu código:

h2 {
    font-family: ''OpenSansSemibold'', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}

Answer 3

Creo jsfiddle con solo fuentes svg y woff y lo woff en mi dispositivo Android 4.3 en el navegador predeterminado. Todas las obras.

Acabo de eliminar todas las fuentes innecesarias para móviles. Todos los dispositivos móviles supports fuentes svg , FF y IE10 needs woff . Por lo tanto, puede utilizar consultas de medios para la definición de la fuente de la fuente por separado: para dispositivos móviles y de escritorio.

Si necesita todos los tipos de fuentes, revise su encabezado Content-Type para los archivos de fuentes, siempre es text/plain que está mal:

• eot tiene una aplicación / vnd.ms-fontobject tipo
• otf y ttf tienen un tipo de aplicación / octeto-flujo
• woff tiene un tipo de aplicación / font-woff
• svg tiene imagen / svg + xml tipo

También revise this página para leer problemas comunes conocidos con la font face .

Answer 4

Nos encontrábamos con un problema similar, y fue causado por nuestro uso de text-rendering: optimizeLegibility de text-rendering: optimizeLegibility eliminar eso de nuestro CSS hizo que nuestras fuentes empezaran a funcionar en 4.3 nuevamente.

Answer 5

Tal vez también podría utilizar la solución de Beacouron de la consulta de medios dirigida al móvil, pero esto puede ser difícil si tiene varias resoluciones de tableta Android para apuntar.

Otra idea tal vez es utilizar un navegador de webkit de orientación de consultas de medios como:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: ''open_sansbold'';
        src: url(''OpenSans-Bold-webfont.svg#open_sansbold'') format(''svg'');
        font-weight: normal;
        font-style: normal;
    }
}

Answer 6

Tengo el mismo problema aquí cómo lo resuelvo.

Solo uso svg en dispositivos móviles con consultas de medios.

@media only screen and (max-width: 320px) {
@font-face {
    font-family: ''open_sansbold'';
    src: url(''OpenSans-Bold-webfont.svg#open_sansbold'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: ''open_sansbold'';
        src: url(''OpenSans-Bold-webfont.svg#open_sansbold'') format(''svg'');
        font-weight: normal;
        font-style: normal;
    }

}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: ''open_sansbold'';
        src: url(''OpenSans-Bold-webfont.svg#open_sansbold'') format(''svg'');
        font-weight: normal;
        font-style: normal;
    }
}

Espero que te sea de ayuda.