"Icons" UND "Arial" UND "keine Seiten-Eigenen-Schriften zulassen"

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • ich kann das Problem unter Linux reproduzieren


    mit relativ neuem Profil getestet


    EDIT: sehe gerade, dass ich den Thread etwas schlampig gelesen habe. Ich habe nicht genau die genannten Schriftarten (Arial) unter Linux getestet sondern die Standard Einstellung unter (siehe zweiten Screenshot) genommen 8)

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

    Einmal editiert, zuletzt von Zitronella ()

  • Danke Zitronella fürs reproduzieren.


    Es geht ja grob gesagt um 2 Sachen:


    1. Das Such-Icon von Awesome, das Du oben getestet hast:

    -Funktioniert manchmal in Linux, je nach Einstellung. Ist aber fragil. (Es sollte ja egal sein, welche Schrift dort eingestellt ist.)

    -Funktioniert problemlos mit Windows.


    2. Die "Material Icons" (z.B. auf http://www.ricardo.ch ) :

    -Funktioniert nicht mit Linux

    -Funktioniert nicht mit Windows






    Heisst das, ich bin auf einen Bug gestossen?


    Ich kann das Problem nicht reproduzieren. Da ich kein Linux nutze, kann ich das aber auch nicht unter den gleichen Voraussetzungen nachstellen und dementsprechend kein Linux-spezifisches Problem ausschließen.

    Sprichst Du jetzt von den "Material Icons" von http://www.ricardo.ch ,

    oder vom Such Icon von Awesome?

    oder von beidem?


    Bei den "Material Icons" ist es kein Linux spezifisches Problem. Sondern das klappt auch nicht in Windows.


    Nutzt Du einen Mac?

    Und wenn ja: Gibt es dort das Problem mit den "Material Icons" im Zusammenhang mit

    "Seiten das Verwenden von eigenen statt der oben gewählten Schriftarten erlauben <deaktiviert>"

    nicht?

    Einmal editiert, zuletzt von Bafire ()

  • Sprichst Du jetzt von den "Material Icons" von http://www.ricardo.ch ,

    oder vom Such Icon von Awesome?

    oder von beidem?


    Das Such-Icon von Font Awesome.


    Bei den "Material Icons" ist es kein Linux spezifisches Problem. Sondern das klappt auch nicht in Windows.


    Nutzt Du einen Mac?

    Und wenn ja: Gibt es dort das Problem mit den "Material Icons" im Zusammenhang mit

    "Seiten das Verwenden von eigenen statt der oben gewählten Schriftarten erlauben <deaktiviert>"

    nicht?


    Ja, ich nutze einen Mac. Und ja, da gibt es auf der Seite ricardo.ch auch das Problem. Die Umsetzung der Icon-Schrift erfolgt dort auf eine andere Weise als bei Font Awesome und diese andere Weise scheint mit der Firefox-Einstellung nicht zusammenzuspielen.

  • Gibt es auf irgendeine Weise die Möglichkeit beides zu bekommen? Vielleicht auf Umwegen?

    Ich möchte also, dass irgendwie als Schrift für meine Seiten jeweils "Arial" verwendet wird, aber dass ich trotzdem in den Genuss von "google material icons" komme.

    ja gibt es, und zwar geht das mit dem Werbeblocker uBlock origin (vielleicht verwendest du das eh schon).

    Mache in den Einstellungen den Haken wieder rein bei "Seiten das Verwenden von eigenen statt der oben gewählten Schriftarten erlauben". Bei Seiten, bei denen du deine gewählte Standardschriftart verwenden willst,blockierst du die Remote Schriftart in uBlock origin.

    Wichtig ist dass du danach die Seite unter Umgehung des Cache (unter Windows ist das Strg+F5 ) neu lädst.

    Ich habe mal ein Video dazu erstellt: https://mozhelp.dynvpn.de/date…tfernen-ublock-origin.mp4

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Da war ich etwas zu ungenau in der Formulierung in Deinem Zitat.

    Besser gewesen wäre, wenn ich geschrieben hätte:

    Zitat

    Gibt es auf irgendeine Weise die Möglichkeit auf der gleichen Seite beides zu bekommen? Vielleicht auf Umwegen?

    Ich möchte also, dass irgendwie als Schrift für eine Seiten jeweils "Arial" verwendet wird, aber dass ich trotzdem auf dieser Seite in den Genuss von "google material icons" komme.


    Also:

    Bei der von Dir vorgestellten Methode hat man auf einer bestimmten Seite entweder:

    A) "Seiten-eigene-Schriften" + Icons

    oder

    B) Arial + keine Icons


    Ich möchte aber gerne:

    C) Arial + Icons

    2 Mal editiert, zuletzt von Bafire ()

  • Bafire

    Hat den Titel des Themas von „"Icons" UND "Arial" UND "keine eigenen Schriften zulassen"“ zu „"Icons" UND "Arial" UND "keine Seiten-Eigenen-Schriften zulassen"“ geändert.
  • Danke milupo für den Link.


    Insbesondere folgendes verstehe ich nicht:


    Zitat:

    if the content uses PUA codepoints, and those codepoints aren't supported by the default font, then they'll be displayed using the next font in the list.

    https://bugzilla.mozilla.org/show_bug.cgi?id=1638585



    Ich muss etwas raten:

    Es wird also in der in den Einstellungen gewählten Schrift im betreffenden "Unicode" gesucht und wenn festgestellt wird, dass die Box dort leer ist, wird <die nächste Schrift in der Liste für die Darstellung ausgewählt>.


    Von was für einer Liste wird hier gesprochen? Und wie stelle ich fest, welche Schrift bei mir als nächstes in dieser Liste steht?

  • Von was für einer Liste wird hier gesprochen?

    Keine Ahnung. Ich glaube nicht, dass es hier um die Schriften in den Firefox-Einstellungen geht. Da es hier um Google-Schriften geht, die den privaten Unicode-Bereich (PUA) belegen, könnte es sich um die Schriften von folgender Seite handeln:


    https://fonts.google.com/


    Wie weiter oben geschrieben, wird ja die Google-Website mit

    CSS
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    eingebunden. Es ist also nichts auf deinem Rechner. Es handelt sich hier ja um Webschriftarten. Auch die Webschriftarten werden mit der CSS-Eigenschaft font-family angegeben, auf ricardo.ch ist das die Schriftart Material Icons. Im Bugreport ist von einer Font-family-list die Rede, die ist bestimmt gemeint.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Betrifft:Lupen-Symbol auf http://www.camp-firefox.de:

    Du könntest also zwei Dinge tun: Entweder den Zeichencode F002 in deinem Arial duch ein Lupensymbol belegen (neu einbauen!) oder irgendein anderes Zeichen nutzen, das standardmäßig in Arial enthalten ist.



    Betrifft Material Icons auf ricardo.ch:

    Fakt ist, es wird ebenfalls der private Unicode-Bereich genutzt.



    So. Obwohl ich es alles andere als verstehe, habe ich jetzt nach dem Motto "Probieren geht über studieren" einfach mal etwas ausprobiert:


    Ich habe mir eine benutzerdefinierte eigene Schrift gemacht nach dem Vorschlag von milupo. Milupo schlägt für das Lupens-Symbol vor, den Zeichencode F002 mit einem Symbol zu belegen.


    -> Das habe ich jetzt gemacht. Und es hat geklappt.


    Nun habe ich das Gleiche auch mit den Material Icons versucht. Ich habe also die folgende Datei heruntergeladen:

    https://github.com/google/mate…MaterialIcons-Regular.ttf


    Sie enthält die "material Icons". Dann habe ich geschaut, welche Zeichencodes in obiger *.ttf für die Material Icons benutzt wurden und habe dann diese in meine benutzerdefinierte eigene Schrift eingefügt. Also die gleichen Zeichencodes besetzt. So habe ich jetzt eine Schrift die sowohl die Zeichen für "Arial" enthält, wie auch ein Zeichen für das Lupen-Symbol, wie auch die "Material Icons". Alles in einer Schrift.


    Aber leider: Im Gegensatz zum Lupen-Icon auf camp-firefox.de, das jetzt wunderbar funktioniert (nicht mehr fragil), funktioniert das mit den "Material Icons" auf ricardo.ch nicht.

    Einmal editiert, zuletzt von Bafire ()

  • Aber leider: Im Gegensatz zum Lupen-Icon auf camp-firefox.de, das jetzt wunderbar funktioniert (nicht mehr fragil), funktioniert das mit den "Material Icons" auf ricardo.ch nicht.

    Eben, darum habe ich auf den entsprechenden Bugreport verlinkt. Die Option in den Firefox-Einstellungen ist eigentlich als entweder oder gedacht und nicht als sowohl als auch, das heißt, entweder werden lokale Schriftarten genutzt oder die Schriftarten von Internetseiten. Beides gleichzeitig wäre eigentlich die Quadratur des Kreises, also eigentlich unmöglich. Das haben die Mozilla-Entwickler bereits in Bezug auf die normalen Icon-Schriftarten umgangen, sodass diese auch funktionieren, wenn keine Website-Schriftarten erlaubt sind. Aber bei den Material Icons gibt es das noch nicht. Da musst du noch abwarten, was der Bugreport ergibt.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

  • Die Option in den Firefox-Einstellungen ist eigentlich als entweder oder gedacht und nicht als sowohl als auch, das heißt, entweder werden lokale Schriftarten genutzt oder die Schriftarten von Internetseiten.

    Aber in meiner benutzerdefinierten Schrift sind ja doch jetzt die "Material Icons" eine lokale Schrift, genau wie die Buchstabenzeichen von Arial. (?)

  • "Material Icons" auf ricardo.ch nicht

    Du könntest in die userContent.css folgenden Code aufnehmen und testen:


    CSS
    @-moz-document domain("ricardo.ch") {
    @font-face {
    font-family: "Material Icons" !important;
    src: url("https://github.com/google/material-design-icons/blob/master/iconfont/MaterialIcons-Regular.ttf")
    format("truetype") !important;
    }
    }

    Das bezieht sich jetzt erst mal nur auf ricardo.ch.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

    2 Mal editiert, zuletzt von milupo ()

  • Aber in meiner benutzerdefinierten Schrift sind ja doch jetzt die "Material Icons" eine lokale Schrift, genau wie die Buchstabenzeichen von Arial. (?)

    Tja, keine Ahnung, warum das nicht funktioniert.


    Ich habe gerade gesehen, dass ricardo.ch die Material Fonts im woff2-Format statt Truetype einbindet. Das könnte die Ursache sein. Ich habe MaterialIconsRegular.woff2 heruntergeladen, die sich jedoch nicht in den Schriftartenmanager von Win 10 installieren lässt. Solche Webschriften kann man also nur von Webseiten einbinden.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

    Einmal editiert, zuletzt von milupo () aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

  • Also, ich wollte mal Dein Script ausprobieren.


    Und bevor ich Deinen Code in die userContent.css kopierte, wollte ich sicherstellen, dass ich alles richtig vorbereitet habe nach

    Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css


    Dabei habe ich folgendes festgeestellt:

    Wenn ich in der userContent.css folgenden Code platziere:

    Code
    * {background: pink !important}

    Dann sehe ich, dass die userContent.css funktioniert, weil nämlich der Hintergrund pink wird. Was dafür spricht, dass ich alles richtig vorbereitet habe.


    Aber wenn ich Deinen Testcode von

    Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css


    CSS
    @-moz-document domain("www.camp-firefox.de") {
    Html > Body {
    background: burlywood !important;
    }
    }

    in die userContent.css schreibe, dann funktioniert es nicht, was wiederum dafür spricht, dass ich irgendetwas falsch gemacht habe.


    *verwirrt

  • Es ist wirklich schlimm mit dir. Was du so ausgräbst. Komischerweise habe ich im deutschen Fx 79 das gleiche Problem. In meinen sorbischen Fx 79 und Fx 81 kein Problem. Ich habe mit einem anderen Selektor getestet: der funktioniert. Möglicherweise liegt body so sehr im Hintergrund, dass es nicht zum Vorschein kommt. In meinen beiden sorbischen Füchsen habe ich das Forum weitgehend angepasst, sodass diese Regel wahrscheinlich anders wirkt.


    Das Beispiel aus meiner Anleitung ist nicht das beste, da ich es (eigentlich 2002Andreas) ursprünglich für die Forums-Software phpBB gemacht habe, die unser Forum früher verwendet hat und deren Gestaltung eine andere war.


    So sieht es in meinem sorbischen Fx 79 aus:



    Dieses dunkle Braun ist „burlywood“.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook

    3 Mal editiert, zuletzt von milupo () aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

  • Hier das Ergebnis von

    CSS
    @-moz-document domain("ricardo.ch") {
    @font-face {
    font-family: "Material Icons" !important;
    src: url("https://github.com/google/material-design-icons/blob/master/iconfont/MaterialIcons-Regular.ttf")
    format("truetype") !important;
    }
    }

    Leider wirkt der Code nicht auf ricardo.ch. -> Die Material Icons werden trotzdem nicht angezeigt.




    **************************************************************************************************************

    Aber in meiner benutzerdefinierten Schrift sind ja doch jetzt die "Material Icons" eine lokale Schrift, genau wie die Buchstabenzeichen von Arial. (?)

    Um zu überprüfen, ob ich die Material Icons in meiner benutzerdefinierten Schrift wirklich in die richtigen Unicode-Zeichen-Boxes eingefügt habe, wollte ich jetzt mal mit "Rechtsklick->Element untersuchen" das zu einem "Material Icon" zugeordnete Unicode Zeichen herausfinden. Leider wird der Unicode im Gegensatz zu den Awesome Font- Icons bei den "Material Icons" nicht angezeigt:



    Ich suche also so etwas wie z.B. "\E012"

    Oder habe ich etwas übersehen?

    4 Mal editiert, zuletzt von Bafire ()

  • Ich suche also so etwas wie z.B. "\E012"

    Oder habe ich etwas übersehen?

    Das Problem ist, dass die Material Icons zwar auf diesen Unicode-Codes basieren, umgewandelt wird aber wohl aus der Bezeichnung des Symbols in das Symbol selbst und nicht aus dem Zeichencode wie bei den normalen Icon-Schriften. In deinem Beispiel heißt das Zeichen add. Dieses Zeichen liegt auf dem Zeichencode \E145, siehe folgende Seite:


    https://github.com/google/mate…aster/iconfont/codepoints


    Die andere Umwandlung wird auch in dem weiter oben angegebenen Bugreport erwähnt:


    Zitat

    The "Material Icons" webfont doesn't map Unicode codepoints to icons, but instead words to icons (via ligatures). If you disable browser.display.use_document_fonts, Firefox renders the text in sans-serif or serif, instead of "Material Icons".

    Du siehst ja auch, dass die Material Icons anders in ein HTML-Dokument eingebunden werden als die Symbole von Icon-Schriftarten.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, WordPress und Facebook