web-dev-qa-db-fra.com

Les déclarations @ font-face ne fonctionnent pas dans le navigateur Internet Android 4.3?

Mon téléphone Samsung Galaxy S3 a récemment été mis à jour d'Android 4.1.3 à Android 4.3. Maintenant, plusieurs sites Web que j'ai conçus et que j'ai testés dans le navigateur Internet Android n'affichent pas les polices que j'ai déclarées avec @font-face. Que dois-je faire pour résoudre ce problème?

Un des sites (version de développement): http://beta.kdfansite.com

Voici quelques exemples de CSS associées à 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;
    /* ... */
}

Chaque police que j'utilise sur le site est déclarée de manière similaire. La déclaration Great Vibes (également dans custom.css) du message "Enjoy your ride" en est un autre à comparer. Toutes les polices s'affichent correctement dans Chrome pour Android et Firefox pour Android sur le même appareil, mais pas dans Android Internet.

Je dois finaliser ce CSS le plus tôt possible et je travaille sur ce projet en tant que volontaire (non rémunéré). Je cherche donc une solution rapide plutôt qu'une révision de code. Je suis aussi un designer UX, pas un développeur web. Merci d'avance.

Edit: J'ai effectué quelques opérations de débogage supplémentaires dans Edge Inspect CC et weinre, en connectant mon téléphone Android et mon iPad à mon ordinateur portable. À Weinre, je suis en mesure de changer les familles de polices sur l'iPad mais pas sur le téléphone. Je peux changer les couleurs de police sur les deux appareils. Il semble donc que le problème sous-jacent est lié au fait que je ne peux pas modifier les polices par défaut lorsque j'utilise un débogueur distant.

csscross-browserfont-faceandroid-4.3-jelly-beanandroid-internet
16
David

J'ai le même problème ici comment je le résous.

Je n'utilise que svg sur mobile avec des requêtes de médias.

@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;
    }
}

J'espère que ça vous aidera.

18
Beauceron

Nous avions un problème similaire, causé par notre utilisation de text-rendering: optimizeLegibility - la suppression de celle-ci de notre code CSS a permis aux polices de fonctionner à nouveau avec la version 4.3. 

20
BenV

Je crée jsfiddle avec uniquement les polices svg et woff et le teste sur mon périphérique Android 4.3 dans le navigateur par défaut. Tout fonctionne.

Je viens de supprimer toutes les polices inutiles pour mobile. Tous les mobiles prend en chargesvg les polices, FF et IE10 nécessitewoff. Vous pouvez donc utiliser des requêtes multimédia pour une définition distincte de font-face: pour mobile et pour ordinateur de bureau.

Si vous avez besoin de tous les types de polices, vérifiez que votre en-tête Content-Type contient des fichiers de polices. C'est toujours text/plain qui est incorrect:

  • eot a le type application/vnd.ms-fontobject
  • otf et ttf ont le type application/octet-stream
  • woff a application/font-woff type
  • svg a le type image/svg + xml

Consultez également this page pour lire les problèmes courants connus avec font face.

2
Pinal

Vous pouvez également utiliser la solution de requête multimédia de Beacouron sur le mobile, mais cela peut s'avérer difficile si vous avez plusieurs résolutions de tablette Android à cibler.

Une autre idée consiste peut-être à utiliser un navigateur de Webkit de requête de média-requête comme ceci:

@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;
    }
}
1
Mathew Porter

J'avais un problème similaire auparavant et je l'ai résolu en ajoutant font-weight: normal !important; aux éléments/texte utilisant la police. Je crois que le problème était que le poids de la police était hérité par les éléments, ce qui a entraîné l’échec de la police.

Donc dans votre code:

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