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

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

/generator

  • @arno
    ARNO* @arno ART LIBRE 5/12/2011
    12
    @dizanv
    @jjllnn
    @baroug
    @nhoizey
    @notabene
    @monolecte
    @vlentz
    @rastapopoulos
    @julien
    @habbon
    @severo
    @ari
    12

    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…).

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 5/12/2011

      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 @baroug 5/12/2011

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

      baroug @baroug
    • @arno
      ARNO* @arno ART LIBRE 5/12/2011

      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 @baroug 5/12/2011

      Ah oui en effet

      baroug @baroug
    • @nicolas1
      nicolas.badia @nicolas1 6/12/2011

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

      nicolas.badia @nicolas1
    • @monolecte
      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA 6/12/2011

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

      M😷N😷LECTE 🤬 @monolecte CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 6/12/2011

      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

      ARNO* @arno ART LIBRE
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 6/12/2011

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

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

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

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 8/12/2009
    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