web-dev-qa-db-fra.com

Problèmes de rendu des polices Safari

Comme vous pouvez le voir ci-dessous, la police Texta-Light dans Chrome apparaît complètement différente avec Safari. Chrome affiche la police comme j'aime mais le rendu de Safari sur OS X et iOS semble trop mince. L'image Safari ci-dessous est prise sur iOS et comme vous pouvez le voir pour une raison quelconque, la police apparaît comme s'il y avait deux bits de texte.

J'ai cherché une solution mais je n'ai rien trouvé qui fonctionne. J'ai essayé d'utiliser -webkit-font-smoothing: subpixel-antialiased; mais selon cette question , le code ne fonctionne plus.

Chrome:

Chrome font-rendering

Safari sur iOS:

Safari font-rendering

Voici le code des images ci-dessus:

h2 {
    font-family: 'Texta-Light', sans-serif;
    font-size: 3.5em;
    line-height: 1.2em;
}

Y a-t-il une solution à cela?

cssgoogle-chromefontssafarirendering
34
Pav Sidhu

Safari a un problème avec les polices. Le correctif le plus simple pour le problème de texte en double est de clarifier le poids de la police:

font-weight: 400;

L'utilisation de la solution de trait de texte Javascript de Lucho avec la spécification de l'épaisseur de police rendra votre texte identique à celui de Chrome.

10
Pav Sidhu

Il existe une propriété CSS, le rendu de texte, qui dans Safari est définie par défaut pour optimiserSpeed. Ce que vous voulez changer, c'est:

text-rendering:optimizeLegibility;

enter image description here

De https://css-tricks.com/almanac/properties/t/text-rendering/

Il existe quatre valeurs possibles:

• auto (par défaut) - Le navigateur fait des suppositions éclairées sur le moment d'optimiser la vitesse, la lisibilité et la précision géométrique lors du dessin du texte. Sachez que différents navigateurs interprètent différemment cette valeur.

• OptimizeSpeed ​​- Le navigateur met l'accent sur la vitesse de rendu plutôt que sur la lisibilité et la précision géométrique lors du dessin de texte. Il désactive le crénage et les ligatures.

• OptimizeLegibility - Le navigateur met l'accent sur la lisibilité sur la vitesse de rendu et la précision géométrique. Cela permet d'utiliser le crénage spécial et les informations de ligature facultatives qui peuvent être contenues dans le fichier de police pour certaines polices.

• géométriePrécision - Le navigateur met l'accent sur la précision géométrique sur la vitesse de rendu et la lisibilité. Certains aspects des polices, tels que le crénage, ne sont pas mis à l'échelle de façon linéaire, donc géométriquePrecision peut rendre le texte à l'aide de ces polices beau. Lorsque la police SVG est mise à l'échelle, le navigateur calcule la taille des pixels, puis arrondit à l'entier le plus proche. La propriété géométriquePrécision permet une mise à l'échelle plus fluide. Remarque: seuls les navigateurs WebKit appliquent cette valeur fluide, Gecko traite la valeur tout comme l'optimizeLegibility.

Il existe un paramètre supplémentaire -webkit-font-feature-settings, dont l'un est le crénage:

-webkit-font-feature-settings

h2 {
     -webkit-font-feature-settings: "kern" 1;
}
19
empedocle

Si, selon votre commentaire, vous ne diffusez que .otf, vous devrez également diffuser les autres types de fichiers.

Cela pourrait être à l'origine d'un problème lié aux iOs car jusqu'à iOs 4.2, SVG était le seul format à utiliser des polices personnalisées sur l'ipad ou l'iphone.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Un excellent outil à utiliser est Font Squirrel's Webfont Generator

Edit: Aussi, comme mentionné dans les commentaires, le font-weight est défini sur bold par défaut et vous chargez une police light.

10
Guy

J'ai trouvé n article qui utilise JS pour ajuster la propriété text-stroke . Voici le code réel:

$(document).ready(function(){
    is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
    is_Explorer = navigator.userAgent.indexOf('MSIE') > -1;
    is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
    is_safari = navigator.userAgent.indexOf("Safari") > -1;
    is_opera = navigator.userAgent.indexOf("Presto") > -1;
    is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
    is_windows = !is_mac;

    if (is_chrome && is_safari){
      is_safari=false;
    }

    if (is_safari || is_windows){
      $('body').css('-webkit-text-stroke', '0.5px');
    }


  });

Vous pouvez modifier le trait de texte d'un autre élément. J'espère que ça aide.

8
Lucho

Essaye ça:

html, body {
    text-rendering: optimizeLegibility;
}

ou si comme ça ça ne marche pas,

html, body {
    text-rendering: geometricPrecision;
}
4
ZwartyZ

Sur la base de la réponse de @ lucho, j'ai utilisé la même approche mais j'applique le correctif dès que <body> charge la balise. Cela résout le problème avec une police Open Sans trop fine dans iOS Safari.

<body>
<script>
  (function () {
    var ua = navigator.userAgent
    var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
    if (isIOSSafari) {
      document.body.style.webkitTextStroke = '.5px'
    }
  })()
</script>

APPROCHE ALTERNATIVE:

Vous pouvez également ajouter une classe comme ios-safari à <html> tag, puis lui appliquer normalement CSS:

  <script>
  (function () {
    const ua = navigator.userAgent
    const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
    if (isIOSSafari) document.documentElement.classList.add('ios-safari')
  })()
  </script>
</head>

CSS:

.ios-safari {
  -webkit-text-stroke: .5px;
}
1
artnikpro