Si je n'ai que WOFF et EOT, quels navigateurs suis-je en charge avec @ font-face?

16

Nous cherchons à acheter une police qui ne permet son utilisation sur le Web que dans les formats fournis: WOFF et EOT.

Je ne sais pas dans quels navigateurs ceux-ci fonctionnent et je n'arrive pas à trouver des informations à jour. Quels navigateurs puis-je prendre en charge avec seulement ces deux-là?

Ma seule expérience est avec la syntaxe de fontspring qui a EOT, WOFF, TTF et SVG.

erik
la source
Question connexe sur le site de conception graphique: quel est le plus petit ensemble de formats de polices Web qui couvre tous les navigateurs?
user56reinstatemonica8

Réponses:

23

C'est la façon standard de charger avec @ font-face , des corrections hacky et tout !!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Mais supprimez SVG et vous perdrez presque complètement la prise en charge d'iOS <5.0

Can I Use a une excellente table pour le support du navigateur généralement une autre pour EOT , une autre pour WOFF , encore une autre pour SVG et enfin une autre pour TTF . Je les ai insérés ci-dessous pour plus de clarté, et cela devrait vous guider sur ce qu'il faut tester, mais gardez à l'esprit que cela changera assez rapidement.

Edit by wyu : J'ai compilé un tableau pour que vous puissiez voir le support côte à côte

Prise en charge du navigateur @ font-face en général

Prise en charge du navigateur @ font-face en général

Prise en charge du navigateur EOT

Prise en charge du navigateur EOT

Prise en charge du navigateur WOFF

Prise en charge du navigateur WOFF

Prise en charge du navigateur SVG

Prise en charge du navigateur SVG

Prise en charge du navigateur TTF

Prise en charge du navigateur TTF

toomanyairmiles
la source
3
pourquoi eot est-il déclaré de deux manières différentes - .eot et .eot? #iefix?
sam
2
Pour tous ceux qui vérifieront cette réponse à l'avenir ... Android> = 4.4 prend désormais en charge WOFF caniuse.com/#feat=woff
ozke
3
Cher @ozke, je viens du futur, merci de partager ce fait utile. Vous serez peut-être également intéressé de savoir que, d'ici la fin de 2015, l'utilisation des versions du navigateur Android Stock qui ne prennent pas en charge wofftombera à moins de 2% des utilisateurs mondiaux, et le navigateur Android Stock sera éclipsé par Chrome pour Android (16%) et UC (8%), tous deux compatibles woff. Firefox pour Android aussi; cependant, son utilisation ne dépassera jamais 1%. Vous pouvez maintenant revenir à l'écoute de "All About That Bass" de Meghan Trainor, qui, je crois, était habituelle en octobre 2014.
user56reinstatemonica8
vous n'avez donc besoin que des polices Web?
SuperUberDuper
1

SVG ne vous mènera nulle part avec @ font-face; mais, EOT est pris en charge par IE; où as, TTF et OTF sont pris en charge par tous les autres principaux navigateurs. En ce qui concerne WOFF, à partir de la lecture, avec sa similitude avec TTF et OTF, il est assez probable qu'il soit pris en charge dans les mêmes navigateurs que TTF ou OTF. Ma suggestion, si vous êtes vraiment intéressé, essayez chaque extension @ font-face dans un navigateur et voyez ce que vous obtenez, puis soumettez ce que vous avez obtenu au W3C pour qu'ils mettent à jour leur page de normes pour le descripteur @ font-face. (Il n'inclut même pas les extensions de police "sûres" actuellement).

Si tout le reste échoue, je suis presque sûr que W3Schools est à jour: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Jeff Langemeier
la source
Le problème est que Safari Mobile 4.1 et inférieur ne prend en charge que SVG.
toomanyairmiles
@toomanyairmiles C'est pourquoi en fin de compte, cela donne une belle apparence à votre "valeur par défaut", puis la rend incroyable pour ceux qui "peuvent" la voir. Impossible d'avoir une couverture à 100% car la plupart des polices n'ont pas d'OTF, EOT ET SVG.
Jeff Langemeier
En fait, vous le pouvez. J'ai construit plusieurs sites qui ont une couverture à 100% en achetant des polices qui viennent dans les quatre types, ou en utilisant des polices gratuites et en générant les fichiers moi-même - cela fonctionne parfaitement.
toomanyairmiles
@toomanyairmiles C'est là que la frappe rapide et lâche me tue, nécessaire Ne peut pas toujours avoir une couverture à 100%, parfois cela ne se produit pas et le concepteur doit se rappeler que dans le pire des cas, les gens utilisent d'anciens navigateurs et autres, 100 % de couverture ne signifie pas toujours 100% de couverture; où je suis à environ 40 à 50% des utilisateurs d'Internet utilisent encore IE 7 ou plus, qui ne supporte pas très bien la police en premier lieu, pour avoir une véritable couverture à 100%, il doit y avoir un résultat net qui semble "décent" ou du moins maintient votre site dans les limites des polices "plus sophistiquées".
Jeff Langemeier
Eh bien, je l'ai essayé, sur de petits sites et ceux de grandes marques. Les polices fonctionnent dans IE6 et 7 est la qualité de rendu aussi bonne qu'un navigateur moderne? Non, mais ça marche très bien.
toomanyairmiles
1

Les fournisseurs de polices Web ont vraiment besoin de fournir un support eot dès le départ pour leurs polices - en particulier à cause de cela! Vous penseriez que ce serait une seconde nature, même pour le cloud (avec possibilité d'inclure ou d'exclure) - si les gens sont obligés de traquer les polices sur liste noire, cela n'encouragerait-il pas le piratage une fois les polices trouvées? @ eb_p1

eburnett
la source
1
Attends, pourquoi? EOT était mort lorsque cette question a été posée pour la première fois, c'était un cadavre en décomposition lorsque vous avez répondu, et aujourd'hui je n'ai pas vu de police EOT depuis plus d'un an.
SilverbackNet