Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

  • http://www.fontsquirrel.com
  • /fontface

/generator

  • ARNO* @arno ART LIBRE 5/12/2011 19:17
    9
    @dizanv
    @jjllnn
    @baroug
    @nhoizey
    @notabene
    @monolecte
    @vlentz
    @rastapopoulos
    @julien
    9

    Je viens d’avoir une catastrophe industrielle avec les #webfonts de chez Google, sur le site que je viens de livrer. Quelques usagers signalent que le rendu des fontes chez eux, sous Windows, est tout moche. Moi j’avais essayé chez moi, ça semblait OK.

    Mais j’active le lissage « Cleartype » sous Windows XP, comme sous Windows 7 et là, sur tous les navigateurs (sauf MSIE9 !), le lissage des webfonts est totalement défaillant. Et c’est incurable : les hacks à base de text-shadow ou de rotation imperceptible ne semblent plus avoir d’effet. Grosse catastrophe : l’identité graphique du site repose sur ces webfonts, et je ne me vois pas tout recoder pour utiliser les images typographiques de SPIP (surtout que les CSS du site ne s’y prêtent pas vraiment).

    Et je découvre, sur le blog du Typekit :
    http://blog.typekit.com/2011/07/26/new-from-typekit-improved-font-rendering-on-windows
    Typekit se vante donc d’avoir (enfin ! ils ont vendu de la merde inutilisable à tout le monde avant ?) trouvé une parade : quelques unes de leurs polices balancent la version Postscript plutôt que Truetype. Et là, le lissage se fait correctement.

    Très bien : il suffit donc que Google te balance un OpenType Postscript plutôt que TrueType. T’as qu’à écrire à Google…

    Donc ce que j’ai dû faire :

    – je télécharge la police de chez Google, version TrueType ;
    – je fabrique les polices et les CSS qui vont bien grâce au #font-face generator de Font Squirrel :
    ►http://www.fontsquirrel.com/fontface/generator
    – j’ouvre la police TTF dans FontLab, et je génère une version OpenType Poscript. Terminaison ".oft".
    – je modifie la déclaration @font-face, pour appeler l’OFT à la place de la TTF, et en changeant l’ordre (sinon, je ne récupère pas la version OpenType) :
    http://pastebin.com/WVkAHSys


    (mise à jour : l’appel à .woff passe avant .otf, sinon Firefox Windows ne fait plus le lissage)
    – et je vire l’appel aux webfonts de Google, puisque je n’utilise plus ces cochonneries qui, en pratique, ont toutes les chances de s’afficher de manière désastreuse sous Windows (tu te rends compte : moche sous Windows 7 avec Chrome dernière version !? et ils te préviennent pas ?).

    Ah oui : je viens d’y passer la fin de mon après-midi et je suis furieux. Utilisez @font-face, qu’ils disaient. En plus, j’ai été obligé de lire des forums Windows, et là tu imagines bien que j’ai envie de tuer quelqu’un (« Il suffit de demander à tes visiteurs de désactiver le lissage ClearType » étant la réponse la plus fréquente…).

    • #Google
    ARNO* @arno ART LIBRE
    • ARNO* @arno ART LIBRE 5/12/2011 20:00

      Pour comprendre le drame :
      http://twitpic.com/7owqqe/full

      Deux copies d’écran du Boston Globe (site tout nouveau tout beau qui utilise fièrement des @font-face). Vu dans Chrome sous Windows 7 (pas un vieux clou, donc).

      – À gauche : lissage cleartype désactivé. Les titrailles, en webfonts, sont parfaitement lissées. Le texte courant (notamment le texte de l’article) n’est pas lissé. Ça, c’est la situation la moins pire, c’est juste que tu n’as pas le lissage du texte courant (du coup : le si joli et lisible Georgia ne ressemble à rien). C’est lisible, mais les empattements sont dessinés avec des pixels.

      – À droite, l’utilisateur a activé le lissage Cleartype (évidemment, ça, tu ne le contrôles pas depuis ton site Web). Le texte courant est joliment lissé, et surtout les éléments de navigation en capitales de petite taille sont beaucoup plus lisibles et élégantes. En revanche, la titraille est carrément moche (si j’ai bien compris, lissée horizontalement, mais pas verticalement). Vu que c’est de la titraille en grand corps, je trouve ça particulièrement vilain : tu crois faire un site avec les dernières technologies de 2011, et vlan, on se croirait sur un PC des années 90. (Et avec d’autres polices, c’est encore plus laid.)

      ARNO* @arno ART LIBRE
    • Baroug @baroug 5/12/2011 22:24

      L’image ne semble pas se charger ce qui m’attriste vu que j’étais curieux de voir ça…

      Baroug @baroug
    • ARNO* @arno ART LIBRE 5/12/2011 22:29

      C’est Twitpic qui a des problèmes. Suit le lien, et force le rechargement. Ça finira par venir.

      ARNO* @arno ART LIBRE
    • Baroug @baroug 5/12/2011 23:10

      Ah oui en effet

      Baroug @baroug
    • nicolas.badia @nicolas1 6/12/2011 09:38

      Windows n’est-il pas sensé prendre en charge les polices eot ?

      nicolas.badia @nicolas1
    • Agnès Maillard @monolecte CC BY-NC-SA 6/12/2011 09:48

      Bon, en tout cas, je fais tourner...

      Agnès Maillard @monolecte CC BY-NC-SA
    • ARNO* @arno ART LIBRE 6/12/2011 10:40

      Ici, il est conseillé d’activer la version svgz de la police.

      La révolution font-face | David Lemaitre
      http://www.davidlemaitre.com/blog/2011/05/04/la-revolution-font-face

      J’ai élaboré une syntaxe @font-face améliorée permettant d’obtenir le meilleur rendu sur tous les navigateurs, toutes versions et OS confondus, ClearType activé ou non !

      Au préalable, il est nécessaire d’ajouter la déclaration du format compressé SVGZ à Apache dans le fichier .htaccess de votre site

      • #CSS
      • #Microsoft
      ARNO* @arno ART LIBRE
    • Nicolas Hoizey @nhoizey CC BY-NC-SA 6/12/2011 11:32

      A voir aussi : ►http://test.prelude-prod.fr

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • Nicolas Hoizey @nhoizey CC BY-NC-SA 6/12/2011 11:36
      @arno

      @arno pas de risque avec l’astuce du svgz quand iOS le supportera ?

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

  • Nicolas Hoizey @nhoizey CC BY-NC-SA 8/12/2009 21:29
    1
    @fil
    1

    Font Squirrel | Create Your Own @font-face Kits
    ►http://www.fontsquirrel.com/fontface/generator

    #font-face #font-face #fonte #générateur #TTF #OTF #dev #web #css #clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire