Wie man UNICODE FONT ICONS richtig codiert, damit sie in allen Browsern gerendert werden

8

Ich möchte Unicode-Symbole zu einer Website hinzufügen und nur Unicode - Keine benutzerdefinierten Schriftartdateien.

Ich weiß, dass ich etwas tun kann wie:

%Vor%

jsFiddle

Allerdings lese ich, dass einige Browser das "Icon" (Unicode-Zeichen) nicht richtig darstellen. Manchmal zeigen Browser ein leeres Quadrat anstelle des Unicode-Zeichens an.

Wie kann ich mein CSS codieren, um dies zu verhindern?

  1. Keine benutzerdefinierten Schriftarten
  2. Keine Bilder
Omar 05.05.2015, 20:24
quelle

4 Antworten

3

Ich verstehe, dass Sie keinen "extra" Aufruf für einen Font-Download oder Bild-Download machen wollen. Wenn Sie darauf bestehen, alles im CSS zu behalten, können Sie Base64 zum Beispiel versuchen:

%Vor%

Dadurch wird das Hamburger-Menüsymbol angezeigt. Hier ist ein funktionierendes Beispiel: Demo

Es wird sicherlich in jedem Browser genau gleich aussehen, weil es ein Bild und keine Schriftart ist.

Sie können hier ein Png-Bild machen: PNG zu Base64

Viel Glück:)

    
Mike 14.05.2015 10:32
quelle
2
  

Allerdings lese ich, dass einige Browser das "Icon" nicht rendern   (Unicode-Zeichen) richtig. Manchmal zeigen Browser ein   leeres Quadrat anstelle des Unicode-Zeichens.

     

Wie kann ich mein CSS codieren, um dies zu verhindern?

Ich bin mir nicht sicher, ob Sie meinen, dass Sie nur das leere Quadrat rendern möchten oder dass die Schriftart für alle Browser gleich sein soll.

Wenn Sie meinen, dass die Schriftart für alle Browser gleich sein soll und keine Schriftartdatei oder Bilddatei enthalten soll, wählen Sie nur eine Schriftart aus, die von allen Browsern unterstützt wird, und testen Sie sie werden korrekt angezeigt.

Hier ist ein Tool, das Sie versuchen können, Ihr Icon in jedem möglichen Browser zu testen: Ссылка

Oder wenn Sie nur wissen wollen, ob der Charakter korrekt angezeigt wird und falls Sie den Fehler nicht auf andere Weise behandeln möchten, können Sie hier einen Weg finden, den Sie vielleicht nützlich finden. Ссылка

    
cytsunny 13.05.2015 08:37
quelle
1

Wenn ein Browser Unicode unterstützt, werden alle Zeichencodes unterstützt. Aber nicht alle Schriftarten haben Zeichenzeichen für alle Unicode-Zeichen.

Um Unterstützung für die von Ihnen gewünschten Zeichen zu erhalten, müssen Sie also eine Schriftart (in Ihrem Fall die websichere) verwenden, die diese Zeichen in Formaten enthält, die von allen verschiedenen Betriebssystemen verwendet werden.

    
crc442 14.05.2015 19:53
quelle
-1

Bis heute gibt es keinen einzigen Web-Browser, der allen Standards entspricht und alle unsere technischen und Design-Anforderungen erfüllt.

Jeder Browser hat seine eigenen Fähigkeiten und Einschränkungen. Aus diesem Grund versuchen wir Entwickler, diese Einschränkungen zu verstehen und alternative Lösungen herauszubringen, damit unsere Anwendungen in allen Browsern und in allen Versionen so nahtlos und so perfekt wie möglich funktionieren. Das Schreiben des Cross-Browser-kompatiblen Codes ist eine Fähigkeit / Kunst.

Der Tag, an dem alle Browser standardisiert werden und derselben Regel folgen, wird das Leben von Webentwicklern (speziell HTML CSS-Entwicklern) sehr einfach sein und möglicherweise auch nicht viel Arbeit / Herausforderungen haben !! ; -)

Was Sie erreichen wollen, ist eine sehr optimistische Lösung, aber in Wirklichkeit ist es einfach nicht möglich. Es ist harte Wahrheit, aber Sie müssen es verdauen und sollten sich auf andere Möglichkeiten konzentrieren, wie Sie Ihre Ziele mit den verfügbaren alternativen Lösungen (die Sie bereits kennen) erreichen können.

    
Vinod Tigadi 13.05.2015 11:36
quelle

Tags und Links