mozilla
Vos résultats de recherche

    text-rendering

    Résumé

    La propriété CSS text-rendering donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte. Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique. La propriété text-rendering est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML, sur Windows et Linux. 

    Note : cette propriété n'a aucun effet sur Mac OS X.

    Un effet très visible est : text-rendering : optimizeLegibility; qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, Calibri, Candara, Constantia etCorbel de Microsoft, ou la famille DejaVu).

    Syntaxe

    text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
    

    Valeurs

    auto
    Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.
    optimizeSpeed
    Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.
    optimizeLegibility
    Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.
    geometricPrecision

    Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc geometricPrecision peut rendre agréables à l'œil les textes utilisant ces polices.

    Avec SVG, lorsque le texte est aggrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.

    Toutefois la propriété geometricPrecision — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.

    WebKit applique précisement la valeur définie, mais Gecko traite la valeure de la même manière que optimizeLegibility.

    Exemples

    /* s'assurer que toutes les polices dans le document HTML sont affichée sous leur plus beau jour,
       mais éviter des ligatures inadéquates dans les éléments de la classe foo */
    
    body  { text-rendering: optimizeLegibility; }
    .foo  { text-rendering: optimizeSpeed; }
    

    Exemple en ligne

    Code CSS Crénage Ligatures
    font: 19.9px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
    font: 20px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
    font: 3em 'DejaVu Serif',Constantia;
    text-rendering: optimizeSpeed;
    LYoWAT ff fi fl ffl
    font: 3em 'Dejavu Serif',Constantia;
    text-rendering: optimizeLegibility;
    LYoWAT ff fi fl ffl

    Notes concernant Gecko

    La valeur palier de 20px du mot-clé auto peut être changée en modifiant la préférence browser.display.auto_quality_min_font_size.

    L'option optimizeSpeed n'a pas d'effet dans Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), puisque le code standard pour afficher le texte est déjà très rapide et il n'existe pas de code plus rapide à l'heure actuelle. Voir bug 595688 pour plus de détails.

    Spécifications

    Ceci est une propriété SVG, elle n'est définie dans aucun standard CSS. Gecko (Firefox) et WebKit appliquent aussi text-rendering au HTML et au XML.

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base pour Windows et Linux

    4.0 

     

    3.0 (1.9) Pas de support Pas de support 5.0 (532.5)
    Support de base pour les autres systèmes d'exploitation Pas de support Pas de support Pas de support Pas de support Pas de support
    auto

    Chrome le traite comme optimizeSpeed

    Le travail continue sur WebKit bug 41363

    Si la taille de la police est de 20px ou supérieure, Gecko utilise optimizeLegibility. Pour les valeurs inférieures, il utilise optimizeSpeed. Pas de support Pas de support Safari le traite comme optimizeSpeed.

    Le travail continue sur WebKit bug 41363

    geometricPrecision

    La version 13 supporte la précision géométrique réelle, sans arrondi au supérieur ou inférieur à la taille supportée par le système la plus proche.

    Introduit dans WebKit 535.1   WebKit bug 60317

    Gecko le traite comme optimizeLegibility.  Pas de support  Pas de support  
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? ? ? ? ?

    Voir également

    Text-related properties: letter-spacing, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-rendering, text-shadow, text-transform, text-indent, white-space, word-spacing

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Manu1400, teoli, hsablonniere, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale