Schriftart Verdana (Stylus) stellt Icon nicht korrekt dar

Das ist logisch, die Zeichen sind nicht in Verdana enthalten. Sie gehören zum Privaten Unicode-Bereich und dieser Bereich ist standardmäßig nicht belegt, in keiner Schriftart. Du musst die Verwendung von Schriftarten der Websites zulassen, dann sollten die Zeichen auch angezeigt werden. Hier im Forum wird Fontawesome verwendet, du hast die Klasse .material-icons, das bezieht sich auf die von Google zur Verfügung gestellten Symbole.

Ja, die meine ich.

Deine erster Code bewirkt übrigens, dass allem, was nicht die Klasse icon hat, Verdana zugewiesen wird.

Zitat von Fox2Fox

Auf einen beliebigen Thread klicken und bis zum Ende scrollen, damit das Antwortfeld erscheint.

Dann müsste ich mich erst registrieren. Aber auf der Seite hinter deinem Link sind auch solche Symbole. Oben in der Navigationszeile das Pfeilspitzensymbol und das Lupensymbol sind sicher auch solche Schriftzeichen. Sie werden also bei mir angezeigt.

Ich habe gerade im Quelltext der Seite gesehen, dass die Zeichen nicht die Material Icons von Google sind, sondern wahrscheinlich von Font Awesome stammen. Es gibt daher keine Klasse .material-icons. Also kann diese Regel von dir auch nicht wirken.

Ja, die Schriftfamilie ist Font AweSome 5 Pro.

Für die Seite kannst du deine Codes nicht verwenden. Eigentlich sollten die Zeichen angezeigt werden. Ich nehme mal an, dass dir der erste Code das Problem macht: Alles, was nicht die Klasse .icon hat - und das ist auf der Beispielseite alles - soll Verdana verwenden. Verdana allein kann aber diese Schriftzeichen darstellen. Deaktiviere mal diesen Code. Der zweite Code wird einfach ignoriert, da es keine Klasse .material-icons gibt.

Wichtig ist eigentlich nur, dass du Schriftarten der Websites zulässt. Um die Verfügbarkeit der Zeichen kümmern sich die Betreiber der Website.

Der erste Code ist eigentlich ziemlich schlecht, er ist sehr allgemein. Das kann zu unerwünschten Ergebnissen führen. Wenn du ihn verwendest, dann musst du auch die Site angeben, für die er gelten soll (@-moz-document-Regel), so wie jetzt gilt er für alle Sites.

Auf der Beispielseite oben, gibt es offensichtlich keine Klasse icon. Schon aus diesem Grund kann die Regel nicht wirken.

Zitat von Fox2Fox

da eher an eine Ausnahme für die erwähnte Seite.

Ob es eine andere Möglichkeit gibt weiß ich nicht.

Ich habe diesen Code mal in der userContent.css eingefügt:

@-moz-document regexp("https?://(?!(.*\\.drwindows\\.de/)).*"){

:not(.icon) {
  font-family: Verdana, sans-serif !important;
}
.material-icons {
    font-family: 'Material Icons' !important;
}
}

Dann sollte er auf allen Seiten außer bei drwindows angewendet werden.

Dazu müsstest du den Code bei dir in Stylus mal deaktivieren um es zu testen.

Du hast offensichtlich keine @-moz-document-Regel angegeben. Beide Regeln von dir taugen nicht für drwindows.de, im Gegenteil die erste schadet sogar. Die erste Regel würde für unser Forum camp-firefox.de funktionieren, weil hier die Schriftsymbole die Klasse .icon haben und Verdana mit dieser Regel für die Schriftsymbole ausgeschlossen wird, denn Verdana gilt nur für alles, was die Klasse .icon nicht hat. Aber genau das trifft auch für die Schriftsymbole auf drwindows.de zu, sie haben nicht die Klasse .icon, deswegen wird Verdana dort auf die Schriftsymbole aungewendet. Die können mit Verdana aber nicht dargestellt werden, die brauchen die Schriftart Font AweSome 5 Pro.

Mit der ersten Regel weist du ohne @-moz-document-Regel den Millionen Webseiten auf der ganzen Welt Verdana zu, wenn nicht gerade die Klasse .icon verwendet wird, was wohl ziemlich selten der Fall sein wird. Und bei Schriftsymbolen von Websites geht es ins Auge, wie du siehst.

Und die zweite Regel hängt ganz in der Luft. Sie setzt voraus, dass irgendwo die Klasse .material-icons verwendet wird. Aber weder unser Forum noch drwindows.de verwenden Material Icons, sondern die Icons von Font Awesome.

Mir scheint, du hast da zwei Regeln eingetragen, ohne genau zu wissen, für welche Seiten die eigentlich gelten sollen. Wenn du die erste Regel brauchst dann beschränke sie mit der @-moz-document-Regel auf eine bestimmte Seite, auch mehrere Seiten sind möglich, aber die Regeln müssen auch den Seiten entsprechen. Für unser Forum kannst du - wie gesagt - die erste Regel verwenden:

@-moz-document domain("camp-firefox.de") {

:not(.icon) {
  font-family: Verdana, sans-serif !important;
}
}

Zitat von 2002Andreas

Dann sollte er auf allen Seiten außer bei drwindows angewendet werden.

Das ist auch noch nicht optimal: Die Nebenwirkung auf drwindows.de ist zwar dann ausgeschlossen, aber auf vielen anderen Seiten könnten noch Probleme auftreten.

Zitat von milupo

auf vielen anderen Seiten

Damit habe ich mich nicht weiter beschäftigt, da Fox2Fox das ja jetzt auch schon so hat für alle Seiten

Zitat von Fox2Fox

Alle mir bekannten Seiten zeigen Verdana, außer https://www.drwindows.de

Du kannst deswegen auf anderen Seiten, die du irgendwann mal besuchst, das gleiche Problem haben, wenn sie die Klasse .icon nicht kennen.

Es hat Gründe, warum font-family nur unter html (allenfalls noch body) und nirgends anders stehen sollte. Du überschreibst mit dem da oben alles und machst es mit !important noch kaputter. Hatte heute schon mal geschrieben, dass man es nach Möglichkeit weglassen sollte, wenn es auch ohne funktioniert.

Allerdings zerhaust du mit Verdana ziemlich gut das Layout bei DrWindows. Ergo wird es nicht bei einer Anpassung bleiben, und die Threadinhalte betrifft es auch nicht.

Nachtrag. Vielleicht kam die Info gestern nicht richtig rüber. Jede Foren-Software ist auf einen bestimmten Font eingestellt, auch diese hier. Es reicht nicht, einfach nur einen gewünschten Font einzustellen, weil das immer Nebenwirkungen hat. Wenn es dir um die eigene Lesbarkeit von Threadinhalten geht, wäre dort anzusetzen, allerdings wie erwähnt mit Bedacht, weil man auch andere Fonts auswählen kann u.U. das Layout leidet. Mit mehr Infos, was dich konkret stört, könnte man auch gezielter helfen.