Share
Ob Sie es glauben oder nicht, es gibt ein Bildformat, das direkt in Ihren Browser integriert ist. Es ermöglicht das Herunterladen von Bildern, noch bevor Sie sie benötigen, rendert sie perfekt auf Retina-Bildschirmen und ermöglicht das Anwenden von CSS-Farben und -Effekten. Ok, ich bin da nicht ganz ehrlich. Es ist kein Bildformat als solches - der Rest gilt jedoch weiterhin. Verwenden Unicode Sie können Symbole erstellen, die unabhängig von der Auflösung sind, praktisch keine Downloadzeit haben und auch mit CSS gestaltet werden können.
In diesem Artikel werde ich Sie durch die Grundlagen sowie einige interessante Dinge führen, die Sie mit Unicode machen können.
Mit Unicode können Buchstaben und Satzzeichen aus verschiedenen Sprachen in einem einzigen Dokument korrekt angezeigt werden. Das ist unglaublich nützlich. Dies bedeutet, dass Ihre Website weltweit verwendet werden kann und genau das anzeigt, was Sie mit anderen teilen möchten - ob dabei Charaktere mit französischen Akzenten oder vollständig in Kanji geschrieben stehen.
Unicode wird auch kontinuierlich hinzugefügt; Derzeit ist es die Version 6.3 mit knapp 110.000 Zeichen. Die Version 7 wird noch in diesem Jahr erscheinen und fast 3.000 neue Charaktere hinzufügen.
Unicode enthält neben Buchstaben und Zahlen auch einige Symbole und Symbole. In letzter Zeit wurden die Emoji-Symbole erweitert, die Sie möglicherweise in iOS-Messaging gesehen haben:
HTML-Seiten bestehen aus Sequenzen von Unicode-Zeichen. Wenn sie über ein Netzwerk gesendet werden, werden sie in Bytes konvertiert. Jeder Buchstabe oder jedes Zeichen für jede Sprache erhält einen eindeutigen Code, der beim Speichern oder Freigeben des Dokuments verschlüsselt werden kann.
Im Idealfall verwendet diese Kodierung ein als UTF-8 bekanntes System, da damit jedes Unicode-Zeichen kodiert werden kann. Aber auch wenn dies nicht der Fall ist, kann jedes Zeichen mit a definiert werden numerische Zeichenreferenz. Zum Beispiel mit ♥ wird ein Herz erzeugen, und Sie können diesen Code einfach direkt in Ihre HTML ♥ eingeben.
Diese Zahl kann entweder eine Standardnummer oder eine hexadezimale Entsprechung sein. Wenn es sich um eine Hexadezimalzahl handelt, muss die Zahl ein sein x davor so & # x2665; wird dasselbe Herz geben (2665 ist Hex für 9829).
Wenn Sie das Unicode-Zeichen mit CSS hinzufügen, müssen Sie den Hexadezimalwert verwenden.
Einige der am häufigsten verwendeten Unicode-Symbole haben einen einprägsamen Namen oder eine Abkürzung, die anstelle dieser Nummerncodes verwendet werden können & (kaufmännisches Und) oder < (weniger als) zum Beispiel.
Gute Frage, aber es gibt mehrere Gründe, die mir einfallen:
Accentsconagua
@Schriftart SymbolDer erste dieser Gründe sollte keine zusätzliche Arbeit erfordern. Wenn Ihre HTML-Datei als UTF-8 gespeichert und verschlüsselt wird, wenn sie über ein Netzwerk als UTF-8 gesendet wird, sollte alles gut aussehen.
Sollte. Leider unterstützen nicht alle Browser oder Geräte alle Unicode-Zeichen gleichermaßen (Sie haben nicht erwartet, dass etwas im Web so einfach ist, oder?) Zeichen wie die Emoji-Symbole werden nicht auf allen Geräten unterstützt, aber diese "genannten" Zeichen werden unterstützt viel zuverlässiger.
Fügen Sie hinzu, um sicherzustellen, dass Sie UTF-8 in einer HTML5-Seite verwenden zum Ihrer Webseiten. Wenn Sie kein HTML5 verwenden, brauchen Sie dies stattdessen.
Der zweite Grund ist, dass es viele nützliche Unicode-Zeichen gibt, die als Symbole auf einer Webseite verwendet werden können. Zum Beispiel: ▶, ≡ und ♥.
Das Tolle ist, dass, sofern unterstützt, keine zusätzlichen Dateien heruntergeladen werden müssen, um diese Symbole anzuzeigen. Dies bedeutet, dass Ihre Website um einiges schneller ist. Sie können auch Farben oder einen Schatten mit CSS hinzufügen. Wenn Sie kreativer werden, können Sie einen Übergang hinzufügen, um die Farbe glatt zu ändern, wenn jemand über dem Symbol schwebt. Dies ist bei Bildern nicht möglich.
Nehmen wir zum Beispiel an, ich wollte auf meiner Webseite einen kleinen Sternchen-Indikator einfügen. Ich könnte so etwas machen:
& # x2605; & # x2605; & # x2605; & # x2606; & # x2606; Dies würde uns etwas wie das Bild unten geben:
Ein Beispiel für einen Bewertungsindikator, der in Firefox angezeigt wird Was Sie vielleicht gelegentlich sehen, ist etwa so:
Das Bewertungsbeispiel wurde auf einem BlackBerry 9000 angezeigt Dies geschieht, wenn diese Zeichen auf dem verwendeten Gerät oder Browser nicht funktionieren. (Zum Glück werden diese Sternformen sehr gut unterstützt, und ich bin nur älteren BlackBerry-Handys begegnet, die Probleme mit ihnen haben.).
Das Zeichen, das angezeigt wird, wenn das erforderliche Unicode-Zeichen nicht unterstützt wird, variiert. Möglicherweise sehen Sie ein leeres Rechteck oder eine Raute mit einem Fragezeichen.
Wie können Sie also das Unicode-Zeichen finden, das Sie verwenden möchten? Nun, Sie könnten durch eine Site wie Unicodinator blättern, um zu sehen, was verfügbar ist, aber ich mag Shapecatcher - diese unglaubliche Site ermöglicht es Ihnen, das Symbol zu zeichnen, und schlägt die nächsten Unicode-Zeichen vor, die Sie auswählen können.
Wenn Sie eine @Schriftart Symbol, dann sollten Sie ein ähnliches Unicode-Zeichen als Fallback verwenden. Auf diese Weise auf einem Browser oder Gerät, das nicht unterstützt wird @Schriftart (wie Opera Mini oder Windows Phone 7) würde der Benutzer mindestens ein ähnliches Zeichen sehen:
Schriften Awesome Symbole in Chrome auf der linken Seite und rechts die darunter liegenden Unicode-Zeichen in Opera Mini Viele @Schriftart Werkzeuge verwenden standardmäßig eine Reihe von Unicode-Zeichen, die absichtlich keine Bedeutung oder eine vorgegebene Form haben (oft als. bezeichnet) privater Bereich oder PUA-Zeichen). Der Untergang dieses Ansatzes ist das Wo @Schriftart wird nicht unterstützt, der Benutzer hat eine Form, die keinerlei Bedeutung hat.
Durch die Verwendung der PUA-Zeichen kann auch Internet Explorer 8 aufgerufen werden Kompatibilitätsmodus, und dunkle Dinge liegen auf diesem Weg - siehe Jeremy Keiths Artikel für mehr zu diesem Thema.
IcoMoon eignet sich hervorragend zum Erstellen @Schriftart Sie können ein beliebiges Unicode-Zeichen als Grundlage für ein Symbol auswählen.
Seien Sie jedoch vorsichtig - einige Browser und Geräte mögen bestimmte Unicode-Zeichen nicht @Schriftart, und das Symbol wird nicht gerendert. Es kann sich lohnen, das vorgeschlagene Unicode-Zeichen über Unify auszuführen. Dadurch erhalten Sie einen Hinweis darauf, wie sicher es ist, dieses Zeichen in einem Zeichen zu verwenden @Schriftart Icon-Set.
Ein Problem bei der Verwendung von Unicode-Zeichen als Fallback für Schriftarten ist, dass sie für Bildschirmleseprogramme oft schlecht unterstützt werden (wiederum enthält Unify einige Daten). Daher müssen Sie sorgfältig über die Verwendung des Symbols nachdenken.
Wenn Ihr Symbol ein reines Schmuckstück neben einem Textetikett ist, das von einem Bildschirmleser gelesen werden würde, würde ich mir nicht allzu viele Sorgen machen. Wenn Ihr Symbol jedoch eigenständig ist, möchten Sie möglicherweise eine ausgeblendete Textbezeichnung hinzufügen, um Benutzern des Bildschirmleseprogramms zu helfen. Selbst wenn das Unicode-Zeichen vom Bildschirmleseprogramm ausgelesen wird, ist die Wahrscheinlichkeit groß, dass es nicht dem entspricht, wofür Sie es verwenden. Zum Beispiel, wenn Sie verwenden & # x2261; Für das horizontale Navigationssymbol "Burger" wird VoiceOver unter iOS es als "identisch mit" lesen..
Nur sehr wenige Schriftarten verfügen über Zeichen für den gesamten Unicode-Bereich. Wenn Sie sich für eine Schrift entscheiden, sollten Sie unbedingt einige Zeichen ausprobieren, die Sie wahrscheinlich benötigen.
Versuchen Segoe UI-Symbol oder Arial Unicode MS für isolierte Symbole. Diese Schriftarten befinden sich wahrscheinlich auf einem PC und auf einem Mac, Lucida Grande hat eine große Anzahl von Unicode-Zeichen. Wenn Sie diese verwenden möchten, fügen Sie sie einfach zu den relevanten hinzu Schriftfamilie CSS-Eintrag, damit der Benutzer das Unicode-Zeichen in diesen Schriftarten sehen kann, wenn diese installiert sind.
Es wäre praktisch, wenn Sie herausfinden könnten, ob ein Unicode-Zeichen unterstützt wurde, bevor Sie es verwendet haben. Es gibt jedoch keine Garantie dafür.
Modernizr hat ein bisschen JavaScript, um zu testen, ob Emoji unterstützt wird. Dies funktioniert jedoch, indem ein einzelner Pixel überprüft wird, ob etwas vorhanden ist. Wenn also der Charakter, den Sie testen möchten, diesen Bereich nicht abdeckt, selbst wenn er angezeigt wird, erhalten Sie beim Test ein falsches Ergebnis. Und nur weil ein Unicode-Zeichen korrekt angezeigt wird, bedeutet dies nicht, dass es sich um die anderen 109.999 handelt.
Kurz gesagt, testen Sie es. Wenn der Charakter nicht unterstützt wird, kann der Benutzer immer noch verstehen, was los ist.
Sie können Unicode nicht nur auf Webseiten verwenden, sondern auch E-Mails.
Dies ist jedoch die gleiche Geschichte; Einige E-Mail-Clients und -Geräte unterstützen sie, andere nicht. Campaign Monitor hat einige Tests durchgeführt, mit deren Hilfe Sie entscheiden können, ob Sie diese verwenden sollen.
Wenn sie sind unterstützt, können sie sehr effektiv sein. Wenn zum Beispiel ein Emoji-Zeichen in einer Betreffzeile verwendet wird, könnte dieses farbige Symbol in einem Posteingang gut auffallen.
Damit ist diese Einführung in Unicode ungefähr abgeschlossen. Ich hoffe, es war hilfreich und hat Ihnen geholfen, ein besseres Verständnis der Funktionsweise von Unicode und seiner Verwendung zu gewinnen.
Wenn Sie Fragen haben, fragen Sie einfach in den Kommentaren.
