web-dev-qa-db-de.com

Probleme beim Rendern von Safari-Schriftarten

Wie Sie unten sehen können, sieht die Texta-Light-Schriftart in Chrome bei Safari völlig anders aus. Chrome zeigt die Schriftart so an, wie ich es mag, aber das Rendern von Safari unter OS X und iOS sieht zu dünn aus. Das folgende Safari-Bild wurde unter iOS aufgenommen, und wie Sie aus irgendeinem Grund sehen können, wird die Schriftart so angezeigt, als ob zwei Textbits vorhanden wären.

Ich habe nach einer Lösung gesucht, aber nichts gefunden, was funktioniert. Ich habe versucht mit -webkit-font-smoothing: subpixel-antialiased; aber laut diese Frage funktioniert der Code nicht mehr.

Chrome:

Chrome font-rendering

Safari unter iOS:

Safari font-rendering

Hier ist der Code für die Bilder oben:

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

Gibt es eine Lösung dafür?

34
Pav Sidhu

Safari hat ein Problem mit Schriftarten. Die einfachste Lösung für das Problem mit doppeltem Text ist die Klärung der Schriftstärke:

font-weight: 400;

Wenn Sie die Text-Strich-Lösung von Lucho in Javascript zusammen mit der Angabe der Schriftstärke verwenden, wird Ihr Text genauso wie in Chrome angezeigt.

10
Pav Sidhu

Es gibt eine CSS-Eigenschaft, Text-Rendering, die in Safari standardmäßig auf OptimizeSpeed ​​eingestellt ist. Was Sie ändern möchten, ist:

text-rendering:optimizeLegibility;

enter image description here

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

Es gibt vier mögliche Werte:

• auto (Standardeinstellung) - Der Browser gibt fundierte Hinweise darauf, wann beim Zeichnen von Text die Geschwindigkeit, Lesbarkeit und geometrische Genauigkeit optimiert werden müssen. Beachten Sie, dass verschiedene Browser diesen Wert unterschiedlich interpretieren.

• OptimizeSpeed ​​- Der Browser legt beim Zeichnen von Text mehr Wert auf Rendergeschwindigkeit als auf Lesbarkeit und geometrische Genauigkeit. Kerning und Ligaturen werden deaktiviert.

• OptimizeLegibility - Der Browser legt mehr Wert auf Lesbarkeit als auf Rendergeschwindigkeit und geometrische Präzision. Dies ermöglicht die Verwendung spezieller Kerning- und optionaler Ligaturinformationen, die in der Schriftartdatei für bestimmte Schriftarten enthalten sein können.

• geometricPrecision - Der Browser betont die geometrische Präzision in Bezug auf Rendergeschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriftarten (z. B. Kerning) werden nicht linear skaliert, sodass mit geometricPrecision Text mit diesen Schriftarten gut aussieht. Wenn die SVG-Schriftart skaliert wird, berechnet der Browser die Pixelgröße und rundet dann auf die nächste Ganzzahl. Die Eigenschaft geometricPrecision ermöglicht eine flüssigere Skalierung. Hinweis: Nur WebKit-Browser wenden diesen fließenden Wert an. Gecko behandelt den Wert genauso wie OptimizeLegibility.

Es gibt eine zusätzliche Einstellung -webkit-font-feature-settings, von denen eine kerning ist:

-webkit-font-feature-settings

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

Wenn Sie gemäß Ihrem Kommentar nur .otf, müssen Sie auch die anderen Dateitypen bedienen.

Dies könnte ein Problem mit iOs verursachen, da SVG bis iOs 4.2 das einzige Format war, in dem benutzerdefinierte Schriftarten auf dem iPad oder iPhone verwendet wurden.

@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 */
}

Ein großartiges Werkzeug ist Font Squirrel's Webfont Generator

Edit: Auch wie in den Kommentaren erwähnt das font-weight ist standardmäßig auf bold eingestellt und Sie laden eine light Schriftart.

10
Guy

Ich fand ein Beitrag, der JS verwendet, um die Text-Stroke-Eigenschaft anzupassen . Hier ist der aktuelle Code:

$(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');
    }


  });

Sie können den Textstrich eines anderen Elements ändern. Ich hoffe es hilft.

8
Lucho

Versuche dies:

html, body {
    text-rendering: optimizeLegibility;
}

oder wenn es so nicht funktioniert,

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

Basierend auf der Antwort von @ lucho habe ich den gleichen Ansatz gewählt, aber ich wende den Fix an, sobald das <body> - Tag geladen wird. Dies behebt das Problem mit zu dünnen Open Sans-Schriftarten in 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>

ALTERNATIVER ANSATZ:

Alternativ können Sie dem ios-safari - Tag eine Klasse wie <html> Hinzufügen und dann normalerweise CSS darauf anwenden:

  <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