Font Gewicht wird heller auf Mac/Safari

Auf meiner letzten Website ist der Text natürlich perfekt auf Chrom und Firefox ohne Berührung Schriftglättung oder irgendetwas anderes.
Aber auf Mac/Safari 7 erscheint der Text gut und wird dann sofort dünner (zu viel dünner/nicht schön zu lesen). enter image description here Font Gewicht wird heller auf Mac/Safari

Nach einigen Forschung [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
und einige spielen Tests mit

-webkit-font-smoothing

Es sieht aus wie Safari zuerst die Textanzeige mit:

-webkit-font-smoothing: subpixel-antialiased;

Dann, nachdem Sie nur bekam den flackernden Effekt, wenn es Schriftart zu:

-webkit-font-smoothing: antialiased;

So scheint es mir, dass ich keine andere Wahl hatte, aber

-webkit-font-smoothing: subpixel-antialiased;

auf meine Website konsistent auf allen Browsern zu erzwingen zu machen.
Ich benutze Font-Gesicht Avenir Std Roman.

Einige Erklärungen zu diesem Safari-Problem? Irgendwelche besseren Lösungen? Könnte meine Schrift ein Teil des Problems sein?

Danke.

Quelle

2014-01-22 migswd

Laut [diese Antwort hier] (http://stackoverflow.com/a/18786954/1016716) wird '-webkit-font-smoothing' nicht mehr verwendet. Sagst du, dass es immer noch einen Effekt in Safari hat? –

Natürlich wird es immer noch benutzt! Wirkung in allen Webkit-Browsern. – migswd

@MrLister Es hat immer noch einen Effekt in Safari, heute :) –

So fixierte ich mein Problem mit der Anwendung:

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
}

Jetzt ist meine Schrift auf jedem Browser konsistent ist.

Quelle

2014-02-11 11:51:09 migswd

Ja, aber auf diese Weise wird Ihre Schriftart nicht mehr mit glatten Sub-Pixel-Rendering produziert. Versuchen Sie einige Tests WITH (Standard) Subpixel-Rendering zu machen und setzen Sie alle Hintergrund-Divs unter der Schriftart auf Schwarz. Das hat in vielen meiner Fälle funktioniert. Auch das Subpixel-Rendering wird deaktiviert (und daher wird die Schrift dünn), wenn Sie css -webkit-backface-visibility: hidden; an irgendeinem Ort. Im Allgemeinen ist das Subpixel-Font-Rendering in Safari sehr knifflig und inkonsistent, ist aber in einigen Fällen möglich. – Garavani

Das löste mein Problem auch heute - Safari rendert Google Font (Lato, 11px, 700 font-weight) nicht wie FF oder Chrome; tatsächlich schien Safari überhaupt keinen fett gedruckten Text zu verwenden. Der grau-auf-schwarz-Text schien ein anderer Grauton zu sein, obwohl es nicht so war. Das Hinzufügen dieser Eigenschaft zu meinem CSS löste die Dinge komplett. – Blazemonger

Das ist kein Fix, sondern wirkt sich auf das Gewicht aller Schriften auf Ihrer Website aus, selbst wenn sie das Problem nicht hatten. Das ist nur faule Codierung. –

-10

die Wahrheit ist, dass die Lösung für dieses Problem (bis Apple dies beheben) ist sehr einfach. Erstellen Sie eine CSS-Datei (example.css) und innen Einsatz dieses:

* {-webkit-font-smoothing:subpixel-antialiased;}

auf Safari> Einstellungen gehen dann> Erweitert> Style Sheet es klicken und die CSS-Datei auswählen, die wir gerade erstellt haben. Starten Sie Safari neu.

TADA !! Problem gelöst. Vorerst

Quelle

2014-07-18 12:07:16 Emmanouil

Grund für den Downvote: Dieser Fix gilt nur für Benutzer, die dies wissen, was wahrscheinlich auf Benutzer beschränkt ist, die a) feststellen, dass ein Problem vorliegt (dh Seiten in mehreren Browsern gleichzeitig anzeigt) oder b) Webentwickler sind die das Problem bemerken. Dies ist kein Fix für die Entwicklung einer Website, die für die Mehrzahl der Benutzer einheitlich über Browser und Plattformen hinweg angezeigt wird. –

versuchen beide

{-webkit-font-smoothing: subpixel-antialiased; 
-webkit-text-stroke:1px transparent;}

Quelle

2015-08-22 07:03:11

Die Einstellung des Strichs hat einen viel größeren Effekt als die Glättung. Für manche Bereiche ist das wirklich toll. Vielen Dank! – LinusGeffarth

dieses Bild Gerade verwenden: link href = "https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i , 700,700i, 900,900i“rel = "stylesheet"

Statt dessen: link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet"

Prob So habe ich für mich gelöst!

Quelle

2017-07-06 12:32:08

Die Verwendung von -webkit-font-smoothing: subpixel-antialiased hat ein wenig funktioniert, aber es gab immer noch einen zu großen Unterschied zwischen Safari, Chrome und Firefox.Mir wurde klar, dass es in Safari nicht funktionierte, die Schriftart dicker zu machen. Stattdessen habe ich die Schriftart in anderen Browsern heller gemacht und dann ein etwas dickeres Schriftgewicht verwendet. Was für mich die Schriftschnitte in allen Browsern Normalisierung endete, ist dies:

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale;

Quelle

2017-08-29 19:55:54 Gavin

Try this:

transform: translateZ(0.1px);

Webkit-Browser auf Mac anders Problem mit Anti-Aliasing-2d und 3d Textelemente bekannt. Wenn Sie dem Element die 3D-Eigenschaft zuweisen, wird das Problem normalerweise behoben.

Quelle

2017-10-03 20:47:28

Font Gewicht wird heller auf Mac/Safari

Antwort

Verwandte Themen