UTF-8 Symbole Darstellung auf PC und Mobile Browsern

OP #8013228

Abend,

ich habe für ein Projekt bei dem ich normale UTF-8 Symbole als kleine Grafiken verwende, z.B. Aus- und Einklapp-Darstellung.

Bei U+23F4 bis 23F7 (Pfeile, wie sie oft in der Audio-Technik vorkommen) gibt es auf meinen Mobile Browsern das Problem, dass diese nicht dargestellt werden. Auf meinem PC werden diese in Edge, Chrome und FF richtig dargestellt. Auf dem Smartphone in Chrome nicht.

Die Symbole 23FB bis 23FF werden weder auf dem PC noch auf dem Smartphone dargestellt.

Sollten diese nicht aber universell darstellbar sein? Kennt jemand vllt. alternavite Symbole in UTF-8 dafür?

Anbei der Link, bei W3School, wo ich diese gefunden habe.

https://www.w3schools.com/charsets/ref_utf_technical.asp

LG Alex

Alex Z. schrieb:

Sollten diese nicht aber universell darstellbar sein?

Nicht jede Schriftart enthält alle Symbole.

Eine Lösungsoption wäre, eine Schriftart mit den fehlenden Symbolen mitzuliefern. https://www.w3schools.com/css/css3_fonts.asp

Die Symbole in SVG konvertieren ginge auch.

Alex Z. schrieb:

Die Symbole 23FB bis 23FF werden weder auf dem PC noch auf dem Smartphone dargestellt.

Hier gehen die: ⏻⏼⏽⏾⏿ Hilft natürlich nichts, wenn die Hälfte der Leser oben nur 5 Kästchen angezeigt kriegen.

Angehängte Dateien:
: Bearbeitet durch User
OP

Ja, verstehe ich, dass nicht jede Font jedes Symbol kennt. Dann würde das aber bedeuten, das der mobile Chrome eine andre Font verwendet als der PC Chrome. Im Body-Tag der Website, habe ich aber fest calibri gesetzt. Sagt jetzt bitte nicht, das Desktop Calibri anders ist als mobile calibri.

Edit:

von wo ist der Screenshot, bzw. welche Font ist das?

: Bearbeitet durch User

Alex Z. schrieb:

Sagt jetzt bitte nicht, das Desktop Calibri anders ist als mobile calibri.

Calibri enthält m.W. außer ein paar Pfeilen garkeine Symbole. Der Browser greift dann auf andere Fonts zurück.

Und unter Android kriegst du meistens garkein Calibri, sondern "Carlito", einen Ersatzfont den Google entwickelt hat, damit keine Lizenzgebühren an Microsoft fällig werden.

Mano W. schrieb:

Da wäre ja glatt die Frage, wie findet man denn raus, welche Symbole auf den gängigen Systemen denn funktionieren und welche nicht? - Der Browser nutzt ja wohl die Systemschrift und nicht etwas anderes.

Deswegen gibt's im CSS @font-face. Wenn deine Webseite aus Design-Gründen, oder weil spezielle Symbole verwendet werden, auf eine bestimmte Schriftart angewiesen ist, dann verlink einfach das TTF oder WOFF File.

Können alle Browser seit ca. 2010. Wenn noch ein historischer IE 6.0 unterstützt werden soll, muss das File zusätzlich noch ins EOT-Format konvertiert werden. Aber das ist dann vermutlich das kleinste Problem.

Alex Z. schrieb:

Abend,

ich habe für ein Projekt bei dem ich normale UTF-8 Symbole als kleine Grafiken verwende, z.B. Aus- und Einklapp-Darstellung.

Wenn man für die richtige Darstellung noch Schriften installieren muss, ist es mit dem /sparsam/ vorbei. Will meinen, dass vmtl ASCII-Art noch viel sparsamer ist. ☺ Und wirklich überall, bis auf klingonischen Raumschiffen, funktioniert.

Flunder schrieb:

Das grössere Problem lauert, wenn irgendein Anwalt auf der Matte steht und Dich beklagt, dass Du Google unter anderem verraten hast, dass sein Mandant Deine Seite gelesen hat.

Google ist nicht das Internet, und Google ist nicht die einzige Option um Font-Files zu hosten, und Google hat auch kein Monopol auf WOFF oder TTF-Dateien. Hatte schon einen Grund, warum ich in der Nachricht mit dem Google-Fonts-Link von "DOWNLOAD" geschrieben habe, und nicht von Datenschutz-Verbrecher-Kindermörder-Hotlink.

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 8 Monate alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.