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

 
  • #f
  • #fo
  • #fon
  • #font
RSS: #font-face

#font-face

0 | 25
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 17/05/2019
    3
    @spip
    @tofulm
    @aris
    3

    google webfonts helper
    ►https://google-webfonts-helper.herokuapp.com/fonts

    Une appli web offrant une interface pour récupérer simplement les fichiers de polices de Google Web Font à intégrer dans un site en local (on évite l’utilisation de ces polices en chargement depuis chez Big Brother pour cause de tracking) : configurable, téléchargement des fichiers + code CSS @font-face à utiliser

    Peut aussi s’utiliser via une API : cf ▻https://github.com/majodev/google-webfonts-helper#rest-api

    #web_dev #google_font #police #web_font #font-face #open_source #SPIP

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 20/05/2019

      Ici aussi ►https://seenthis.net/messages/325302 en 2014 :p

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @baroug
    baroug @baroug 7/06/2017

    Combining fonts - JakeArchibald.com
    ▻https://jakearchibald.com/2017/combining-fonts

    https://jakearchibald.com/static/imgs/icon.e36785a43208.png

    The trick is in the unicode-range descriptor. It indicates that the src should only be used for the hyphen (U+2d) and equals (U+3d) code points. You can turn a unicode character into a code point using this snippet:

    #typo #web_design #font-face

    baroug @baroug
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 17/05/2017
    6
    @tofulm
    @baroug
    @ari
    @rastapopoulos
    @raphael
    @oletrouher
    6

    Create Your Own font-face Kits » Font Squirrel
    ►https://www.fontsquirrel.com/tools/webfont-generator

    Un générateur de variantes de polices (.eot, .svg, .ttf ...) en ligne. Fourni également le code @font-face à intégrer en CSS

    #font-face #générateur #outil-en-ligne #fontsquirrel

    cy_altern @cy_altern CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 18/05/2017

      Perso je ne l’utilise plus beaucoup, je passe généralement par des outils plus simples qui se content de me convertir la police en WOFF et WOFF2 (les autres formats ne sont plus trop utiles désormais).

      Par exemple :
      ►https://everythingfonts.com/otf-to-woff
      ►https://everythingfonts.com/otf-to-woff2

      ou carrément en ligne de commande sous node.js :
      ►https://github.com/fontello/ttf2woff

      Un petit tour par caniuse indique que Woff est compris par 97% des visiteurs en France (et Woff2 par 87%). Et par ailleurs, @font-face est aussi compris par 97% des visiteurs. Ce qui signifie que tous les visiteurs qui peuvent utiliser des webfonts avec @font-face peuvent en même temps utiliser Woff ; ce qui rend les autres formats (.eot, .svg, .ttf) inutiles.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/05/2017

      Mais suivant la langue des contenus du site final, ça permet aussi de réduire le champs, et donc le fichier, ce que ne font pas forcément les autres outils qui ne font que conversion. Non ?

      RastaPopoulos @rastapopoulos CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 18/05/2017
      @rastapopoulos

      @rastapopoulos : oui effectivement. Mais l’utiliser parce que ça fait les multiples formats de fontes et le code dont on avait besoin il y a quelques années, je signale que ce n’est plus nécessaire.

      ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @archiloque
    Archiloque @archiloque CC BY 18/07/2016
    1
    @b_b
    1

    A Comprehensive Guide to Font Loading Strategies
    ►https://www.zachleat.com/web/comprehensive-webfonts
    /web/img/avatar.png

    Archiloque @archiloque CC BY
    • @b_b
      b_b @b_b PUBLIC DOMAIN 19/07/2016

      #css #font-face

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/07/2015
    1
    @kent1
    1

    ttfautohint
    ▻http://www.freetype.org/ttfautohint

    ttfautohint’s goal is a 99% automated hinting process for web fonts, acting as a platform for finely hand-tuned hinting.

    via ▻https://pixelsvsbytes.com/2013/11/how-to-create-perfect-web-fonts-in-3-steps

    Disponible dans les options du générateur de #fontsquirrel, ce qui permet d’avoir un bien meilleur rendu sur windows avec certaines typos.

    #font-face #shell

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 13/10/2014
    7
    @rastapopoulos
    @goom
    @spip
    @baroug
    @ari
    @mukt
    7

    Loading webfonts with high performance on responsive websites
    ▻http://bdadam.com/blog/loading-webfonts-with-high-performance.html

    Only serve #fonts in woff format Other browsers get the old “websafe” fonts Download the font in “binary” format and optimize it Serve the fonts yourself Serve them as #css files - base64 encoded data URIs If the user doesn’t have the font, load it asynchronously and store in localStorage Otherwise load it from localStorage without accessing the server Have fun because your site renders much faster and your users have a much better usability experience

    #font-face

    • #Disqus
    • #mobile device
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 13/10/2014

      #font #webperf #développement #web #intégration #CSS

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 14/10/2014

      Bon j’ai envoyé un mail à l’auteur car impossible de commenter sur son Disqus sans avoir un compte autre part, et il m’a répondu, à propos de test de connectivité, donc je vous en fait profiter :

      I think connectivity tests just aren’t reliable now. You can maybe make some predictions, but there are many factors, which make it almost impossible to guess appropriate enough. On a mobile device it also changes almost every time e.g. when you are travelling.

      The cool thing about my method is that the browser loads those fonts asynchronously and it doesn’t really matter whether the font files can be downloaded or not, because the content is always going to be visible. In the worst case it will be displayed with fallback fonts.

      What could be more interesting is to optimize the font stack. Each device has some default fonts which are always installed: like Roboto on Android, Tahoma on Windows etc.

      Et effectivement, un truc intéressant, dans la pile de polices, après avoir mis celle qui doit être téléchargée, mais avant celles qui sont génériques ("verdana", « sans », etc), c’est d’arriver à trouver des polices qui sont dans chacun des systèmes un peu connu du marché (Windows 7 et 8, Android, OSX, Ubuntu, etc).

      De cette manière, même sans avoir encore chargé la police voulue, le site sera tout de même plus joli qu’avec du verdana !

      C’est, entre autre, aussi une idée pour la dist de #SPIP même quand on ne charge aucune police !

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 22/12/2014

      La suite, toujours du même auteur :

      In my previous article about webfont loading I showed a technique about how to load webfonts without blocking page rendering and without annoying the users with flickering text on all pageloads. This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers.

      Expectations

      – The users must see the text as soon as possible.
      – As longs as the font is loading, the text must be rendered with the fallback font so that users can see and read it.
      – Users shouldn’t be annoyed with flickering text on each page load.
      – Modern browsers with WOFF2 support should receive the fonts in WOFF2 format. This means ca. 30% less filesize.

      ▻http://bdadam.com/blog/better-webfont-loading-with-localstorage-and-woff2.html

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 22/12/2014

      Ça serait pas mal d’arriver à automatiser ça dans SPIP. #idée_pour_SPIP

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @fil
    Fil @fil 20/04/2013
    3
    @rastapopoulos
    @baroug
    @ari
    3

    FF Subsetter - Optimize your #WebFont
    ▻http://www.subsetter.com

    FontFont Subsetter – Optimize your Web FontFonts in three easy steps. And all for free!

    supprimer les caractères inutilisés d’une #font-face

    Fil @fil
    Écrire un commentaire
  • @baroug
    baroug @baroug 31/03/2013
    4
    @rastapopoulos
    @fil
    @nhoizey
    @mukt
    4

    Introducing Adobe Blank « Typblography
    ▻http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html

    Earlier this year, the Adobe Type Team was approached by one of our other development teams to produce a special-purpose font with two fascinating—at least to me—characteristics:

    All Unicode code points are covered.
    All code points are rendered using a non-spacing and non-marking glyph.

    #typographie #webfonts #@fontface

    • #Adobe
    baroug @baroug
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 31/03/2013

      #police_libre

      RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 2/04/2013

      faudrait tester ce hack #javascript qui contrôle le chargement de la #font-face

      Fil @fil
    Écrire un commentaire
  • @baroug
    baroug @baroug 16/02/2013
    2
    @denisb
    2

    Using Type: Getting #font-face Right, Preventing Faux Bold « FontShop Blog
    ▻http://blog.fontshop.com/2013/02/14/using-type-getting-font-face-right-preventing-faux-bold

    First, thanks Art Blanc for requesting that I add this brief bit as an extension to Using Styles Properly. Designing with professional webfonts, you’ve generally got two options. Host your own, or go with someone like Typekit or Webtype that handles the hosting and serving of font files as needed. I’ll focus on the first case, but this is still pretty applicable to the second, as it will point out why problems like faux bold and faux italic occur, and how to fix them.

    #typographie

    baroug @baroug
    Écrire un commentaire
  • @fil
    Fil @fil 30/03/2012
    1
    @suske
    1

    Frontend SPOF in Beijing | High Performance Web Sites
    ►http://www.stevesouders.com/blog/2012/03/28/frontend-spof-in-beijing

    des sites peuvent se bloquer totalement à cause de scripts synchrones chargés depuis twitter etc, si ces sites sont censurés (firewall d’entreprise ou de pays).

    des conseils aussi pour ne pas trop avoir de problèmes d’affichage avec @font-face :
    ►http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance

    #web #design #censure #internet #font-face

    Fil @fil
    • @robin
      robin @robin CC BY 2/04/2012

      Je confirme, j’étais à Shenzhen il y a une semaine, et j’ai été surpris du nombre de sites qui ne marchent pas du tout parce qu’ils font appel à Twitter. J’ai rapidement routé twitter vers 127.0.0.1 pour pouvoir browser normalement.

      robin @robin CC BY
    Écrire un commentaire
  • @fil
    Fil @fil 10/01/2012
    2
    @nhoizey
    @signalsurf
    2

    The New #Web #Typography
    ►http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html

    TYPE ON THE WEB IS ABOUT TO CHANGE FOREVER. AGAIN.
    As the #font-face rule emerged, it brought with it sweeping changes to the visual landscape of the web. The designer’s toolkit grew substantially, but this integration was only partial. Many typefaces were stripped of their most powerful features: things like swashes, alternates and small caps. These details help to make typefaces more useful and expressive. Now, as #OpenType features become accessible in more browsers, this expressive power can raise typography on the web to an even higher level.

    TABLE OF CONTENTS
    Small Caps
    Ligatures
    Numerals
    Kerning
    Fractions
    Alternates

    Fil @fil
    • @arno
      ARNO* @arno ART LIBRE 10/01/2012

      Arg : le premier exemple est (évidemment ?) l’utilisation des small caps.

      / use small-caps /
      .smallcaps {
      -moz-font-feature-settings : « smcp=1 » ;
      -ms-font-feature-settings : « smcp » 1 ;
      }

      Sauf qu’en CSS, il y a déjà ça :

      font-variant: small-caps;

      Le second exemple indique comment « activer » les ligatures qui sont déjà activées par défaut (liga), et que tu peux déjà forcer par :

      text-rendering: optimizeLegibility;

      Un autre exemple explique comment « activer » le kerning (dont on peut tout de même espérer qu’il est toujours activé par défaut), que tu peux déjà forcer par :

      text-rendering: optimizeLegibility;

      Et comme le dit la recommandation :
      ►http://dev.w3.org/csswg/css3-fonts

      Authors should generally use ‘font-variant’ and its related subproperties whenever possible and only use this property for special cases where its use is the only way of accessing a particular infrequently used font feature.

      On a donc ici 3 exemples (sur 6) qui consistent à recommander d’appeler le nom informatique d’une feature OpenType dans un appel cryptique de bas niveau (les features OpenType correspondent, de manière standardisée, à des caractéristiques typographiques identifiées et nommées), plutôt que d’appeler des CSS « normales » et lisibles par un être humain.

      ARNO* @arno ART LIBRE
    • @fil
      Fil @fil 10/01/2012

      ok donc mauvais conseils de Microsoft… étonnant

      Fil @fil
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 10/01/2012
      @seenthis

      Il faudrait pouvoir partager un commentaire, sur @seenthis et sur Twitter et autres, c’est parfois plus intéressant que le seen initial... #seenthis_souhait

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @baroug
      baroug @baroug 10/01/2012

      Porchez a RT ce seen. Classe.

      baroug @baroug
    • @arno
      ARNO* @arno ART LIBRE 10/01/2012
      @baroug

      @baroug, c’est trop mignon, d’avoir gardé ton âme de midinette. :-)

      ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @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
  • @delphine
    DelphineM @delphine CC BY 17/08/2011
    1
    @franckpaul
    1

    ►http://test.prelude-prod.fr
    Faites le test pour alimenter les stats autours de la visibilité des polices lissées.
    Les résultats sont là : ►http://test.prelude-prod.fr/stats.php

    #policeLissée #font-face

    DelphineM @delphine CC BY
    Écrire un commentaire
  • @tom_dubois
    Thomas Dubois @tom_dubois CC BY 29/06/2011
    3
    @jjllnn
    @baroug
    @aris
    3

    Google Webfonts V2
    Nouvelle interface graphique en test de Google Webfonts
    ►http://www.google.com/webfonts/v2

    Elle est présentée sur leur blog :
    “The Google Web Fonts team has been hard at work designing a new font browsing experience for www.google.com/webfonts. Today, this new interface is available for you to try! Just click here, or you can click the New Version link at the top of our current product. The interface has a lot of the features you’ve requested, including the ability to preview your own custom text, the ability to compare fonts side-by-side, as well as an indication of page load times.”
    ►http://googlewebfonts.blogspot.com/2011/06/new-face-of-google-web-fonts.html
    #font-face #typographie #webfonts

    • #Google
    • #Web Fonts team
    Thomas Dubois @tom_dubois CC BY
    • @arno
      ARNO* @arno ART LIBRE 29/06/2011

      Je découvre (avec horreur) que 95% de ces polices ne contiennent pas le œ, ni le Œ, et pas le Ÿ non plus. 25 ans après, on continue donc à subir les conséquences d’ISO 8859-1.

      De plus, aucune ne semble contenir le symbole €.

      ARNO* @arno ART LIBRE
    • @tom_dubois
      Thomas Dubois @tom_dubois CC BY 29/06/2011

      Oui, aucune ne contient le signe euro, pour les autres caractères seules les polices qui ont le jeu Latin Extended les ont (ce qui ne fait pas lourd, et c’est loin d’être les plus chouettes). Typekit’s not dead.

      Thomas Dubois @tom_dubois CC BY
    Écrire un commentaire
  • @baroug
    baroug @baroug 2/03/2011
    1
    @aris
    1

    The #Font-Face Rule and Useful Web Font Tricks - Smashing Magazine
    ►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks

    Most browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using #Google’s Webfont Loader.

    #typographie #webdesign

    • #embedded Web fonts
    • #Web Font Tricks
    • #web fonts
    • #Smashing Magazine
    baroug @baroug
    Écrire un commentaire
  • @baroug
    baroug @baroug 4/02/2011
    1
    @aris
    1
    @fil

    Merci @fil The New Bulletproof #Font-Face Syntax | Fontspring
    ►http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

    In September 2009, Paul Irish came up with the Bulletproof syntax for writing the font-face declaration. It was compact and worked across all browsers at the time. Recent, growing complaints that fonts weren’t loading in Android, led us to recommended the Mo’ Bulletproofer syntax devised by Richard Fink instead. Unfortunately Mo’ Bulletproofer requires double declarations and is therefore harder to maintain.

    #typographie

    • #Android
    • #Paul Irish
    • #Richard Fink
    baroug @baroug
    Écrire un commentaire
  • @baroug
    baroug @baroug 24/01/2011
    2
    @aris
    @fil
    2

    Maitriser le délai d’affichage des fontes - Typographisme
    ►http://typographisme.net/post/Maitriser-le-délais-d-affichage-des-fontes

    À titre personnel, je suis plutôt partisan de la méthode choisie par Firefox et Opera. En effet, le Web est un milieu hostile où l’on ne maîtrise pas les conditions de rendu ni la latence réseau. En conséquence je préfère être sûr que mes visiteurs pourront lire le texte plutôt que d’être sûr que celui-ci sera joli (mais si je peux avoir les deux, je préfère encore plus). Ceci étant, si vous construisez des sites où le design est primordial et où le contenu textuel n’est qu’un soutien graphique, il est effectivement souhaitable d’avoir un comportement comme celui de Safari, Chrome ou Internet Explorer. Ah ! Cruel dilemme.

    LIMITER LE CLIGNOTEMENT

    Allons courage, il n’y a pas de fatalité, et il est possible de réduire les inconvénients liés à l’une ou l’autre des solutions d’affichage. D’abord voyons comment limiter l’effet de clignotement de Firefox et Opera.

    #typographie #font-face

    • #Allons
    baroug @baroug
    • @fil
      Fil @fil 25/01/2011

      quel cauchemar ce truc

      Fil @fil
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 24/01/2011

    Glossaire de termes typographiques
    ►http://www.adobe.com/fr/type/topics/glossary.html
    Un glossaire de termes typographiques proposé par Adobe, pour tous ceux qui s’intéressent enfin à ce sujet grâce à l’explosion de @font-face sur le Web depuis peu !
    #font-face #typographie #glossaire #terme #vocabulaire #gp:links

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 1/04/2010

    Typecut :: Modules pour Firefox
    ►https://addons.mozilla.org/fr/firefox/addon/61269?collection_uuid=38e04bf2-accc-dcbb-37b8-b30a96dc0fa1

    “The Firebug plugin that extracts embedded (Typekit) font resources from websites and allows their separate download.”

    #font-face #fonte #police #dev #web #firebug #clevermarks #extension #Firefox #Typekit

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 1/04/2010

    FireFontFamily :: Modules pour Firefox
    ►https://addons.mozilla.org/fr/firefox/addon/111672

    “Highlight the rendered font-family in Firebug”

    #font-face #fonte #police #dev #web #firebug #Firefox #extension #clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @0gust1
    0gust1 @0gust1 CC BY-NC 1/03/2010

    webfontfontuserguide.pdf (application/pdf Object)
    ►http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

    doc de synthèse sur typographie et CSS (@font-face)

    #webdesign #web #typography #font #fonts #html5 #css3 #pdf #font-face #webdev #css #filetype_pdf #media_document

    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 25/01/2010

    Elliot Jay Stocks » Home
    ►http://elliotjaystocks.com

    #design #inspiration #font-face #gp:inspiration

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 25/01/2010

    ASK KEN™ - Visual Knowledge Browser
    ►http://askken.heroku.com

    “ASK KEN™ is sort of a Node-Link diagram that allows to visually navigate through interconnected topics provided by the Freebase Service. It takes advantage of the latest HTML5 features by using the canvas element for drawing.”

    #navigation #sujet #freebase #html5 #canvas #font-face #dev

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 12/01/2010

    24 ways: Designing For The Switch
    ►http://24ways.org/2009/designing-for-the-switch

    #font-face #fonte #police #caractère #dev #web #FOUT

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 4/01/2010

    Mo’ Bulletproofer @Font-Face CSS Syntax
    ►http://readableweb.com/mo-bulletproofer-font-face-css-syntax

    “After careful consideration, research, and discussion – I strongly recommend that you don’t use local() at all”

    #font-face #police #fonte #web #dev #local #clevermarks

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

Thèmes liés

  • #web
  • #fonte
  • #typographie
  • #css
  • #clevermarks
  • #dev
  • #police
  • #webdesign
  • #typography
  • #design
  • #css3
  • #webfonts
  • #fonts
  • company: google
  • #font
  • #caractère
  • #extension
  • #html
  • #gratuit
  • #firebug
  • #html5
  • #gp
  • #firefox
  • #générateur
  • industryterm: web fonts
  • #inspiration
  • industryterm: filetype pdf media
  • technology: pdf
  • #pdf
  • #webdev
  • #typekit
  • industryterm: webdesign web typography font fonts html5 css3 pdf
  • #media_document
  • #filetype_pdf
  • #navigation
  • #spip
  • #sujet
  • technology: html
  • city: typekit
  • #spip-zone