11
votes

@ font-face est obsolète sur la version iPhone de Safari. Quelles sont mes alternatives?

Selon La documentation d'Apple , @ font-face est obsolète pour une utilisation sur la version iPhone de Safari. L'iPhone n'inclut que 11 polices , Afaik, et, dans tous les cas, j'ai besoin d'un joli folle Font pour une application que je bâche. Je vais générer de texte aléatoire. Les images ne sont donc pas une option. Quelles alternatives ai-je? Suis-je coincé avec une solution JavaScript comme Cufón ?


0 commentaires

4 Réponses :


3
votes

Cufón est vraiment la seule solution que vous pourrez utiliser hors de la boîte. Il a l'avantage supplémentaire d'être assez rapide sur l'iPhone car il utilise la toile plutôt que sur SVG inline, et les polices générées sont généralement d'environ 60-80% plus petites que les polices d'origine (lorsqu'elles sont comprimées).


4 commentaires

J'ai déjà utilisé Cufón avant et comme ça. Je veux montrer une série de chiffres en succession rapide et je ne pense pas que Cufón puisse changer le texte une fois que cela a été converti.


Appeler cufon.refresh ("sélecteur") immédiatement après avoir défini le fichier innerhtml d'un élément de Cufon'd à une valeur différente fonctionne bien - il n'y a pas de scintillement perceptible sur mon bureau, mais vous devez tester sur un appareil mobile pour voir si Il effectue le changement assez rapide.


Ah, à droite. Je ne savais pas que tu pouvais faire ça à Cufón. Merci!


Si vous ne l'utilisez pas pour une meilleure décoration, je pense que la solution SVG est meilleure car elle a l'avantage de se comporter aussi bien.



0
votes

Je vais générer du texte aléatoire, donc Les images ne sont pas une option.

Vous pouvez utiliser une bibliothèque graphique sur le serveur et dessiner les images à la volée. J'ai fait quelque chose de similaire et ça marche, mais bien sûr, cela dépend de la quantité de texte que vous souhaitez dessiner. Plus si le texte se répète au moins parfois, vous pouvez mettre en cache les images.


2 commentaires

J'ai besoin d'afficher des nombres aléatoires en succession rapide et dans une portée d'environ 10k à 10k. Trop de cache. J'ai peut-être besoin de montrer des combinaisons d'images des numéros individuels, 0 à 9.


Pour les chiffres, j'utiliserais des sprites CSS: générer un PNG avec -0123456789, puis mettre chaque chiffre comme arrière-plan dans une div. Il suffit de changer le décalage vertical pour changer quel chiffre apparaît dans chaque emplacement. Nice et rapide, un objet simple d'aller chercher sur HTTP qui sera ensuite mis en cache tout au long de la mise en cache, et aucune charge de serveur supplémentaire au-delà de servir une image statique.



17
votes

Vous pouvez réellement utiliser @ font face-face. Vous avez juste besoin d'utiliser des polices SVG. Il existe des utilitaires pour convertir TTFS en SVGS

Voir ceci pour plus d'informations (pas mon message)

http: //blog.themeforest .NET / TUTORIALITORITAIRE / HOW-TO-ACTROSSER-NUVELER-FONT-FACE-SUPPORT /


3 commentaires

Super article. C'est une excellente solution qui fait du travail @ font face à tous les grands navigateurs.


C'est la façon dont je suis allé avec. Je pense que cela vaut mieux que Cufon personnellement car cela fonctionne hors de la boîte, et il doit avoir un soutien GPU en quelque sorte. Merci!


Le problème si vous prenez en charge en arrière, c'est que Safari 3 ne prend pas en charge SVG, bien qu'il puisse prendre en charge les polices OTF.



18
votes

Eh bien, vient de découvrir @ font-face code> est maintenant prise en charge sur l'iPhone et l'iPad actuel. La documentation liée à ce qui précède, qui est Safari CSS Référence montre l'exemple de l'intégration de la police.

@font-face {
    font-family: "MyFamilyname", cursive [, ...];
    font-style: normal [, ...];
    font-variant: normal[, ...];
    font-weight: bold[, ...];
    font-stretch: condensed[, ...]; /* Not supported */
    font-size: 12pt;[, ...] /* Not supported */
    src: local("Font Family Name"),
        url(http://..../fontfile.ttf) format("truetype"),
        url(http://..../fontfile.ttf) [, ...];
}


1 commentaires

Si je veux stocker les fichiers de polices à l'intérieur de l'application, une connexion internet n'a pas besoin de la connexion Internet pour charger les polices, que ferais-je pour le paramètre "URL" de Font-Face? S'il vous plaît aider avec ma question de police ici (mon fichier HTML utilisant Font-Face est dans mon répertoire de documents et les fichiers de polices elles-mêmes sont dans mon ensemble (dossier Ressources): Stackoverflow.com/questions/9014211/...