-moz-osx-font-smoothing entfernen

[Elena]

Hallo!

Ich habe ein Problem, welches ich einfach nicht lösen kann. Die installierte Schrift sieht im Browser (Firefox) aus, als hätte sie eine kontur bekommen und ist in einer kleinen Punktgröße auch schwer zu lesen so. Nun habe ich herausgefunden, dass ich diese zwei Sachen:

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

im CSS korrigieren muss.

Die Website habe ich mit einem Wordpress Theme gebaut unt dort kann ich auch Custom Css eingeben. Ich weiß nur nicht genau was. Und in welche Klammern es wo hin muss. Kann mir da vielleicht jemand helfen?

Viele Grüße! Elena

[Rolf B]

Hallo Elena,

das ist nicht das einzige Stylesheet. Ich sehe in deinem Screenshot drei weitere <link rel="stylesheet"> Verweise, einen auf usercontent.one/wp/www.elena..., einen auf deine Domain und einen weiteren Inline-Style.

Das Inline-Stylesheet aus dem screenshot ist ein Fall für Augenkrebs, es wäre besser gewesen, den Inhalt des style-Elements als Text herauszukopieren, damit man das CSS ordentlich formatieren kann.

Ich erkenne zwei font-smoothing Einträge, einen in Zeile 2, einen in Zeile 4. Aber editierst Du das in diese Textwurst hinein? Oder kommt dieser Inline-Style aus irgendwelchen Wordpress-Quellen (eigene CSS Datei oder irgendein Konfigurationsdialog)? Wenn ja, müsste man dort ansetzen. Ich habe nur keine Ahnung von WordPress und von deinem Theme schon gar nicht.

Abgesehen davon: ist das font-smoothing etwas, was Du selbst eingebaut hast und wieder heraus haben willst? Oder kommt es vom Theme? In beiden Fällen würde ich anmerken wollen, dass es eine font-smooth-Eigenschaft gibt und -webkit-font-smoothing und -moz-osx-font-smoothing die Herstellerversionen davon sind. Diese Eigenschaft stand 2002 in einem Arbeitsentwurf der CSS3 Fonts Spezifikation (sagt caniuse.com) und ist seitdem nicht wieder aufgetaucht. Du benutzt also etwas, das allem Anschein nach unnötig ist.

Welchen Firefox benutzt Du auf welchem Betriebssystem mit welcher Schrift, so dass der Kontur-Effekt eintritt? Kannst Du uns diese "in Arbeit" Seite verlinken?

Rolf

[Elena]

Hallo Rolf!

Herzlichen Dank für die schnelle Antwort! Es handelt sich um ein Wordpress-Theme (Laytheme), ich habe das smoothing nicht selbst eingebaut und würde es gerne entfernen. Firefox ist auf dem neusten Stand, das habe ich schon nachgeschaut.

Ich versuche die ganze Zeit im custom-css Sektor des Theme etwas zu verfassen, was das smoothing disabled.

Im Theme-Forum habe ich dazu auch nichts lesen können, ich kann mir nicht vorstellen, dass ich die einzige mit dem Problem bin.

Ich weiß nur nicht wie ich genau im Cusstom-CSS-Part die stelle überhaupt definieren soll wo der smoothing-part vorkommt, weil es wirklich einfach eine Textwurst ist..

Viele Grüße! Elena

[Elena]

https://www.elena-gutierrez.de/

das ist gerade der Stand der Website..

[Gunnar Bittersmann]

@@Elena

Nun habe ich herausgefunden, dass ich diese zwei Sachen:

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

im CSS korrigieren muss.

Zum Zurücksetzen von CSS-Eigenschaften auf ihre Ausgangswerte gibt es die Schlüsselwörter initial, unset und revert.^[1] [CSS Cascading and Inheritance Level 4 §7.3]

MDN erklärt die Unterschiede etwas ausführlicher: initial, unset, revert.

Du willst vermutlich -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial für denselben Selektor setzen, den das WP-Theme verwendet hat. Wenn dein Stylesheet nach dem des Themes kommt, sollte das genügen, ansonsten mit !important nachhelfen.

🖖 Живіть довго і процвітайте

---

1. der Vollständigkeit halber: und revert-layer; aber das wirst du nicht brauchen ↩︎

[Elena Tork]

Hallo Gunnar!

Herzlichen Dank für die Antwort!

Nun habe ich das Problem, dass die Befehle nicht erkannt werden. Ist meine Schreibweise eventuell falsch?

Ich habe im CSS-Bereich des Themes folgendes ausprobiert:

style { -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; }

.style { -webkit-font-smoothing: initial!important; -moz-osx-font-smoothing: initial!important; }

body { -webkit-font-smoothing: initial!important; -moz-osx-font-smoothing: initial!important; }

.body { -webkit-font-smoothing: initial!important; -moz-osx-font-smoothing: initial!important; }

Ich habe die obigen Versionen auch alle mit none und unset anstelle von initial ausprobiert. Auch nur den Inhalt mit Klammern habe ich ausprobiert.

Leider ohne Erfolg. Ist meine Schreibweise vllt. einfach falsch

Viele Grüße! Elena

[Gunnar Bittersmann]

@@Elena Tork

Ich habe im CSS-Bereich des Themes folgendes ausprobiert:

So meinte Linda das nicht. 😉

 style {
-webkit-font-smoothing: initial;
-moz-osx-font-smoothing: initial;
}

Das gilt für alle style-Elemente. Da diese (der CSS-Code darin) gar nicht angezeigt werden, ist das sinnfrei.

 .style {
-webkit-font-smoothing: initial!important;
-moz-osx-font-smoothing: initial!important;
}

 .body {
-webkit-font-smoothing: initial!important;
-moz-osx-font-smoothing: initial!important;
}

Das gilt für alle Elemente, die der Klasse "style" bzw. "body" angehören. Git es solche? Vermutlich nicht.

 body {
-webkit-font-smoothing: initial!important;
-moz-osx-font-smoothing: initial!important;
}

Hier kommen wir der Sache schon näher. Die Eigenschaften sind aber von deinem Theme nicht für body gesetzt, sondern für [class*=" icon-oc-"], [class^="icon-oc-"]. Also für alle Elemente, wo im Wert ihres class-Attributs " icon-oc-" (mit Leerzeichen davor) enthalten ist oder die mit "icon-oc-" anfangen (d.h. wo eine Klasse enthalten ist, die mit "icon-oc-" anfängt).

Auch wenn dieses Font-Smoothing (was wohl generell keine so gute Idee ist) für body nicht gilt; für darin enthaltene Elemente einer Klasse, die mit "icon-oc-" anfängt, gilt es eben doch.

Du müsstest die Eigenschaften auch genau dafür wieder zurücksetzen. Wie ich sagte: „für denselben Selektor setzen, den das WP-Theme verwendet hat.“ Das sollte ohne !important gehen:

[class*=" icon-oc-"], [class^="icon-oc-"] {
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}

Oder du gehst radikal vor und setzt sie für alle Elemente zurück:

* {
  -webkit-font-smoothing: initial !important;
  -moz-osx-font-smoothing: initial !important;
}

🖖 Живіть довго і процвітайте

[Elena Tork]

Herzlichen Dank für die Antwort!

Ich habe nun beide Versionen im den CSS Bereich ausprobiert und die Schrift ist leider unverändert.

Diese Versionen habe ich auch probiert:

[class*=" icon-oc-"], [class^=icon-oc-]{ font-smooth: never!important; -webkit-font-smooth: never!important; }

body{ text-rendering: unset!important; }

Das hat leider auch nichts gebracht. Hat vielleicht noch jemand ein Tip für mich?

Viele Grüße! Elena

[Elena Tork]

Und dies habe ich ebenfalls versucht:

body, #sp-header, #sp-component, #sp-bottom, p, li, h1, h2, h3, h4, h5, a { text-rendering: unset !important; }

• anstelle des text-rendering einmal mit smoothing.

Es passiert nichts.

Cache habe ich auch immer gelöscht …

[Rolf B]

Hallo Elena Tork,

entweder jagst Du ein Phantom, oder Du hast seit deinem letzten Posting noch Dinge verändert.

Ich habe deine Seite jetzt aufgerufen - unter Windows 10, in Chrome und Firefox. Auf meine Frage, welches Betriebssystem Du benutzt, habe ich keine Antwort gefunden.

Ich sehe keinen Kontureffekt.

Ich sehe auch nicht, dass die font-smoothing-Eigenschaften auf den _ABOUT_TOP Text oder auf den _NAME Text angewendet würden. Sie gelten lediglich für Elemente mit einer Klasse, deren Name mit icon-oc- beginnt, sowie für das Elemente mit id=#one-com-icon sowie ein Element mit Klasse wp-menu-image, wenn es Kindelement eines Elements mit Klasse toplevel_page_onecom-wp ist. Das alles ist auf deiner Seite überhaupt nicht vorhanden, der Smoothie wird demnach gar nicht gemixt. Wenn Du bei Dir einen Kontureffekt siehst, könnte das etwas sein, das nur auf deinem PC auftritt. Hast Du ein anderes Gerät, mit dem Du die Seite abrufen kannst?

Damit hätte ich dann Zeit für den Self-typischen Rundumschlag:

Ich sehe nur, dass dein "about top" Text viel zu klein ist. Was natürlich die Lesbarkeit behindert. 12px ist unzumutbar, zumindest für meine beinahe 60 Jahre alten Augen. Immer noch besser als die 10px, die für _ABOUT_TOP gesetzt sind, okay, aber MIR würde es einen Gefallen tun, wenn Du als font-size 0.9rem setzen würdest (d.h. 90% der Default-Fontsize der Seite) und als letter-spacing 0.05rem. Das HTML für den _ABOUT_TOP Bereich ist aber ohnehin unnötig kompliziert, da sind <span> Elemente drin, die Dir vermutlich der WP Editor hineingeneriert hat. Versuch doch mal, die wieder wegzubekommen und statt dessen Schriftgröße und Letter-Spacing für den ganzen _ABOUT_TOP Container zu setzen. Äh, ok, keine Ahnung wie sich das in WP darstellt, ich seh ja nur das gruselige Ergebnis, das WP daraus erzeugt hat.

Ich sehe noch was anderes: eine Fehlermeldung in der Konsole: "CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet" - das liegt offenbar an deinem Ressourcenmix aus www.elena-gutierrez.de und usercontent.one. Das müsstest Du auf jeden Fall harmonisieren.

https://usercontent.one/wp/www.elena-gutierrez.de/wp-content/... sieht ganz so aus, als wäre das eine Default-URL von one.com für deinen Webauftritt. Ein Probeabruf von Dateien zeigt mir auch, dass ich mit https://usercontent.one/wp/www.elena-gutierrez.de/wp-content/xyz und mit https://www.elena-gutierrez.de/wp-content/xyz die gleichen Dateien erhalten. Demnach solltst Du https://usercontent.one/wp/www.elena-gutierrez.de überall durch https://www.elena-gutierrez.de ersetzen können - bzw. besser noch die URLs komplett ohne Domain angeben, also beispielsweise /wp-includes/css/classic-themes.min.css?ver=1 statt https://www.elena-gutierrez.de/wp-includes/css/classic-themes.min.css?ver=1, damit Du jegliche Cross-Domain Probleme vermeidest. Ich weiß natürlich nicht, wie einfach sich das in Wordpress umsetzen lässt.

Rolf

[Elena]

Danke für Deine Antowrt Rolf!

Ich habe nun einmal die Website über Firefox auf einen PC aufgerufen und es ist tatsächlich wohl die kombination aus Firefox und Apple.

Alles andere kommt zu einem anderen Zeitpunkt ;)

Nun muss ich erstmal die Website befüllen, mit hoffentlich nicht mehr so vielen Hindernissen.

Herzlichen Dank fürs Teilen Deines Wissens! Ich habe zuvor noch nie mit HTML und CSS zu tun gehabt und war dementsprenchend etwas überfordert. ;D

Viele Grüße! Elena

[Rolf B]

Hallo Elena,

was Apple angeht, kann @Gunnar Bittersmann sicherlich nochmal weiterhelfen.

Ich habe gerade nochmal bei caniuse.com geschaut. Diese ganze Smoothie-Geschichte scheint Mac OS X spezifisch zu sein und unter Windows nicht relevant.

Da dein CSS so gestaltet ist, dass das font-smoothing überhaupt nicht verwendet wird, ist es möglicherweise so, dass Du es auf der Apple-Plattform sogar brauchen könntest.

Gunnar, siehst Du einen Kontureneffekt, wenn Du die Seite über OS X aufrufst? Würde ein font-smoothing ihn beheben?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Gunnar, siehst Du einen Kontureneffekt, wenn Du die Seite über OS X aufrufst?

Nö. Was ich sehe, sind, graue Linien. Ist das Schrift? Mal mehrmals ⌘+ gedrückt … ah ja, Schrift. Immer noch kein Kontureneffekt.

Allerdings läuft „STUDIO ELENA GUTIÉRREZ“ in „Elena Gutiérrez is a German-based 3D artist …“ hinein. Entweder wurde mit dem Theme Schindluder betrieben oder das Theme war von vornherein schon grottenschlecht.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar Bittersmann,

Allerdings läuft „STUDIO ELENA GUTIÉRREZ“ in „Elena Gutiérrez is a German-based 3D artist …“ hinein

Auf welchem Gerät?

Das dürfte wohl ein Problem mit der Responsivität sein. Font Smoothing ist angeblich ein Os x only Feature, also ein anderes Issue.

Rolf

[JürgenB]

Hallo,

ich habe im Safari diese Regel gefunden:

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

Wenn ich sie rausnehme, sehe ich einen Unterschied.

Zur Schriftgröße: für meine alten Augen sieht das wie strukturierter Hintergrund aus. Je nach Fensterbreite liegt der eine Textbaustein (STUDIO…) über dem anderen (Elena Gutiérrez is…), was aber nicht schlimm ist, da ich es ja doch nicht lesen kann. Beim Vergrößern wird es auch nicht besser.

Gruß
Jürgen