@font-face déclarations ne fonctionne pas sous Android 4.3 navigateur Internet?

Mon Samsung Galaxy S3 téléphone récemment mis à niveau à partir d'Android 4.1.3 vers Android 4.3. Maintenant, plusieurs des sites que j'ai conçu, qui je l'ai testé dans l'Android navigateur internet ne sont pas de l'affichage des polices, j'ai déclaré avec @font-face. Que dois-je faire pour résoudre ce problème?

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

Voici certains des CSS pour Ouvrir 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é dans une manière similaire. La Grande Vibes déclaration (également dans la coutume.css) pour le "profitez de votre promenade" message en est une autre pour 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.

J'ai besoin de finaliser cette CSS, dès que possible, et je travaille sur ce projet en tant que bénévole (non payé). Donc, je suis à la recherche d'une solution rapide plutôt qu'une révision du code. Je suis aussi un UX designer, pas un développeur web. Merci à l'avance.

Edit: j'ai fait un peu de débogage supplémentaires aujourd'hui en Edge inspect CC et weinre, la connexion de mon téléphone Android et mon iPad à mon ordinateur portable. Dans Weinre, je suis en mesure de changer la police des familles sur l'iPad, mais pas sur le téléphone. Je peux changer les couleurs de police sur les deux appareils. Donc, il semble que le problème sous-jacent est lié au fait que je ne peux pas changer les polices de caractères hors du défaut lorsque j'utilise un débogueur distant.

et là, je me demande pourquoi mon S3 n'est pas d'obtenir cette mise à jour android 4.3
Double Possible? L'examen de cette SORTE de page: stackoverflow.com/questions/16223771/...
Je pensais à ce sujet, mais j'ai une autre version d'Android (4.3). Cette question est également spécifique à Android du navigateur internet par défaut. Le mien a bien fonctionné dans Android 4.0 et 4.1, ainsi que sur Chrome/Firefox pour Android.
Juste assez. En ce qui concerne ce poste, a été le format SVG, aussi ne fonctionne pas sur le vôtre? Je demande seulement parce que lorsque j'ai testé votre svg chemin d'accès, l'emplacement a abouti à rien de se passe...par opposition à la .ttf ou .eot qui invite à télécharger le fichier.
J'ai vu la même chose se produire avec l' .fichier svg sur plusieurs autres sites (j'ai essayé de Police de l'Écureuil et de plusieurs autres concepteurs de sites), mais ces sites ont tous de l'affichage des polices correctement sur le navigateur Android. La seule chose qui semblait différent, c'est que ces sites ont été en utilisant des chemins relatifs pour leurs polices, mais quand j'ai fait cette modification sur mon site les polices étaient encore s'affiche pas correctement sur mon ordinateur portable et mal sur mon téléphone.

OriginalL'auteur David | 2014-01-02

18

J'ai le même problème, voici comment je le résoudre.

Je ne l'utilise svg sur mobile avec les media queries.
```
@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;
    }
}
```
Espère que c'est vous aider.

Merci, et bienvenue! C'est d'une grande aide. Il fonctionne dans tous les navigateurs que j'ai testé: Chrome, Firefox, IE et Safari pour bureau; Safari et Chrome pour iPad; Android Internet et google Chrome pour Android. Le seul navigateur que j'ai testé, où il ne fonctionne pas est de Firefox pour Android. Savez-vous à droite pour la main si il y a un moyen de corriger ça sans le casser dans d'autres navigateurs?
En outre, depuis le corps des requêtes de média sont les mêmes, la rédaction de la requête de média @media screen and (max-width: 320px), l'écran et l' (max-device-width: 720px) et (orientation:portrait), l'écran et l' (max-device-width: 1280px) et (orientation paysage) permettrait d'économiser code. Qui a été une préoccupation pour moi, parce que mon site utilise plusieurs font-face.
Vous, monsieur, sont d'une absolue légende!! Merci beaucoup!!
il fonctionne très bien mais en persan personnages ne colle pas ensemble

OriginalL'auteur Beauceron
20

Nous avons été confronté à un problème similaire, et il a été causé par l'utilisation de la text-rendering: optimizeLegibility - retrait de nos CSS qui fait de nos polices de commencer à travailler sur 4,3 à nouveau.

Ce fut le cas aussi sur notre projet. Samsung Galaxy S3 cours d'exécution 4.3 avec eot et woff des fichiers de police. Merci!
+1 même question pour nous ici. Galaxy Nexus @ 4.2.1.
Confirmé sur 4.3 utilisation du Galaxy S3.
Confirmé à android 4.4.2, merci beaucoup de l'homme, n'a pas s'attendre à ce que

OriginalL'auteur BenV
2

Je créer jsfiddle avec seulement svg et woff polices et de le tester sur mon Android 4.3 appareil dans le navigateur par défaut. Toutes les œuvres.

Je viens de supprimer les polices de caractères pour mobile. Tous les mobile prend en charge svg les polices, les FF et IE10 besoins woff. Ainsi, vous pouvez utiliser les media queries pour séparer font-face defenition: pour les appareils mobiles et de bureau.

Si vous avez besoin de tous les types de polices de vérifier votre Content-Type - tête pour les fichiers de police, il est toujours text/plain qui est faux:
- eot a application/vnd.ms-fontobject type
- feo et ttf ont application/octet-stream type
- woff a application/font-woff type
- svg a image/svg+xml type
Également vérifier cette page pour lire connu des problèmes communs avec font face.

N'est-ce encore du travail pour tous les principaux navigateurs web sur le bureau? Je ne veux pas de fixer les polices pour un type d'appareil et de la pause pour un autre, donc je vais tester pour aujourd'hui.
Le jsfiddle fonctionne pour moi, mais quand j'ai fait les modifications dans mon fichier CSS et re-testé le site sur mon téléphone, il n'a pas de travail là.
De nouveaux changements sont sur votre site beta.kdfansite.com maintenant?
La version actuelle utilise un correctif qui FontSquirrel recommandé pour moi. Ils voulaient me faire essayer leur version sans des chemins absolus. La version dans votre jsfiddle ne fonctionne pas pour moi avec des chemins absolus ou relatifs. Je suis à la recherche dans le Contenu des en-têtes de Type maintenant.
Je ne suis pas sûr de la façon de modifier le Type de Contenu des en-têtes pour les polices de caractères. Il n'était pas évident à partir du site de code HTML ou CSS. Où serais-je capable de faire cela?

OriginalL'auteur Pinal
1

J'ai eu un problème similaire avant et je l'ai résolu en ajoutant font-weight: normal !important;pour les éléments/texte en utilisant la police. Je crois que le problème était que l'épaisseur de la police a été héritée par les éléments et cela a provoqué la police à l'échec.
J'espère que ça fonctionne 🙂

Dans votre code:
```
h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}
```
Qui n'a pas fonctionné pour moi sur mon Android 4.3 appareil. Pouvez-vous poster un lien vers un exemple de page web qui fonctionne avec ce fix?
Suffit de vérifier que votre police TTF n'est pas corrompu. Certains en ligne des convertisseurs de police de la corbeille des polices dans le processus de conversion.
eot = IE9, eot?#iefix = IE6-IE8, woff = FF/Chrome, ttf = safari / android / ios, svg = héritage ios ou si ttf échoue
Je suis en mesure d'afficher les polices TTF " des personnages dans l'Explorateur Windows lorsque j'ouvre. Est-ce la seule chose que j'avais besoin de vérifier?

OriginalL'auteur tnt-rox
1

Vous pourriez aussi peut-être utiliser Beacouron la solution de la requête de média ciblant les mobiles, mais cela peut être difficile si vous avez divers tablette Android résolutions pour cible.

Une autre idée peut-être d'utiliser un media-query cibler les navigateurs webkit comme suit:
```
@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;
    }
}
```
OriginalL'auteur Mathew Porter
-1

À compter de 2017, on peut utiliser le @import requête fournie par fonts.google.com pour la police que vous aimez. Il suffit de chercher la police souhaitée(s), sélectionnez-la, puis dans le minimisé barre en bas de l'écran, vous devrez récupérer @import dans les "intégrer". J'ai joint une capture d'écran pour la référence:
https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

J'ai eu le même problème dans le mobile du navigateur par défaut, mais après j'ai utilisé de la syntaxe, le problème a été résolu. Je ne sais pas pourquoi, mais cela a fonctionné.

OriginalL'auteur Irina

Vous devez vous connecter pour publier un commentaire.