Probleme beim Rendern von Safari-Schriftarten

Wie Sie unten sehen können, die Texta-Light schriftart in Chrome erscheint völlig anderes mit Safari. Chrome zeigt die Schrift, wie ich aber Safari Rendern auf OS X und iOS sieht zu Dünn. Das Safari-Bild unten aufgenommen, iOS und wie Sie sehen können aus irgendeinem Grund die schriftart scheint, als ob es zwei bits von text zu präsentieren.

Habe ich eine Lösung gesucht, aber nichts gefunden was funktioniert. Ich habe versucht, mit -webkit-font-smoothing: subpixel-antialiased; aber nach diese Frage, ist der code nicht mehr funktioniert.

Chrome:

Safari auf iOS:

Probleme beim Rendern von Safari-Schriftarten

Hier ist der code für die obigen Bilder:

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

Gibt es eine Lösung für dieses?

Kommentar zu dem Problem

wenn Sie mit einem webfont, prüfen Sie, welche version (woff -, svg -, ttf) ist tatsächlich angewandt werden. dann versuchen Sie, ändern Sie die Reihenfolge der src()s in die @font-family - Deklaration Kommentarautor: Wes

Können Sie uns ein MCVE? Einen screenshot gibt uns nicht viel weiter zu gehen. Kommentarautor: Alexander O'Mara

@AlexanderO ' Mara habe ich nur noch den code für die Bilder. Kommentarautor: Pav Sidhu

Das ist nicht ganz eine MCVE. Eine Beispiel-Webseite mit, wo wir konnten, untersuchen Sie den text wäre nützlicher. Kommentarautor: Alexander O'Mara

@AlexanderO ' Mara habe ich eine website, die zeigt das problem im Safari. Kommentarautor: Pav Sidhu

InformationsquelleAutor der Frage Pav Sidhu | 2015-06-25

14

Gibt es eine CSS-Eigenschaft text-rendering, die in Safari ist standardmäßig eingestellt optimizeSpeed. Was Sie ändern wollen:
```
text-rendering:optimizeLegibility;
```
Vom https://css-tricks.com/almanac/properties/t/text-rendering/

Gibt es vier mögliche Werte:

• auto (Standard) - browser lässt Vermutungen zu, wenn die Optimierung der Geschwindigkeit, Lesbarkeit und geometrischer Präzision beim zeichnen von text. Beachten Sie, dass verschiedene Browser interpretieren diesen Wert anders.

• optimizeSpeed - browser, betont rendering-Geschwindigkeit über Lesbarkeit und geometrischer Präzision beim zeichnen von text. Es deaktiviert das kerning und Ligaturen.

• optimizeLegibility - browser, betont Lesbarkeit über die rendering-Geschwindigkeit und geometrische Präzision. Dies ermöglicht die Verwendung von speziellen kerning und optionale Ligatur Informationen, die enthalten sein kann, wird in der schriftart-Datei, die für bestimmte Schriftarten.

• geometricPrecision - browser, betont geometrischen Präzision über die rendering-Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte der Schriften—wie kerning—nicht Linear, so geometricPrecision machen kann text mit diesen Schriften gut Aussehen. Wenn SVG-font ist, skaliert der browser berechnet die pixel Größe, dann rundet auf die nächste Ganzzahl. Die geometricPrecision Eigenschaft ermöglicht mehr Flüssigkeit zu skalieren. Hinweis: Nur in WebKit-Browsern gelten diese Flüssigkeit Wert, Gecko behandelt den Wert wie optimizeLegibility.

Gibt es eine zusätzliche Einstellung -webkit-font-feature-settings, von denen einer von Ihnen ist kerning:

-webkit-font-feature-settings
```
h2 {
     -webkit-font-feature-settings: "kern" 1;
}
```
InformationsquelleAutor der Antwort empedocle

Wenn, wie pro Ihren Kommentar, Sie sind nur mit .otf, werden Sie brauchen, um zu dienen die anderen Dateitypen zu.

Könnte dies zu einem Problem zu tun, mit iOs bis iOs 4.2, SVG war nur das format zu verwenden, eigene Schriften auf dem ipad oder 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 */
}

Ein großes Werkzeug zu benutzen ist Font Squirrel Webfont-Generator

Edit:
Auch wie erwähnt in den Kommentaren der font-weight eingestellt ist bold standardmäßig und laden Sie ein light schriftart.

InformationsquelleAutor der Antwort Guy

Fand ich eine post, die verwendet JS anpassen der text-stroke-Eigenschaft. 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');
    }


  });

Können Sie ändern Sie die text-Schlaganfall, einige andere element.
Hoffe, es hilft.

InformationsquelleAutor der Antwort Lucho

7

Safari hat ein Problem mit Schriftarten. Der einfachste fix für die doppelten text-Thema ist die Klärung der font-weight:
```
font-weight: 400;
```
Mit Lucho Javascript-text-Schlaganfall-Lösung zusammen mit der Angabe font-weight wird Ihr text die gleiche ist, wie es auf Chrome.

InformationsquelleAutor der Antwort Pav Sidhu

Versuchen Sie dies:

html, body {
    text-rendering: optimizeLegibility;
}

oder wenn es nicht funktioniert,

html, body {
    text-rendering: geometricPrecision;
}

InformationsquelleAutor der Antwort ZwartyZ

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.