Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen

Bitte sehen Sie sich den folgenden Screenshot an, den ich von der Google Gmail-Seite gemacht habe (das ist das zweite Mal, dass ich einen Screenshot vom selben Ort gemacht habe):

Das kleine nach unten zeigende Dreieck im roten Kreis im Bild ist das verwendete Zeichen, welches kein Mainstream-Zeichen ist. Tatsächlich ist das Google-Zeichen nur eine kleine Anwendung und sein wahres Potenzial wurde noch nicht ausgeschöpft. Dieser Artikel untersucht auf bahnbrechende Weise, wie man Zeichen anstelle von Bildern verwendet, um den scharfen Eckeneffekt zu erzielen, der scheinbar nur mit Bildern erreicht wird, oder den abgerundeten Eckeneffekt, der hauptsächlich mit Bildern erreicht wird. Ich habe keine eingehende Studie zum Thema Charakterfliegen durchgeführt, daher sind einige der Schlussfolgerungen oder Methoden nicht optimal. Es kann sein, dass es in Zukunft bessere Methoden gibt, daher wurde dem Titel dieses Artikels das Wort „Beta“ hinzugefügt, um auf Tests hinzuweisen. Einige der in diesem Artikel erwähnten Methoden sind in tatsächlichen Projekten möglicherweise nicht praktikabel. Der Schlüssel liegt darin, Kollegen zu helfen, ihren Horizont zu erweitern und das Potenzial von Charakteren in der Webentwicklung aufzuzeigen.
Hinweis: In diesem Artikel beziehen sich „Zeichen“ hauptsächlich auf Zeichen mit Sonderformen, die nicht direkt über die Tastatur eingegeben werden können. Obwohl die englischen Buchstaben ABC auch als Zeichen gelten, umfassen die in diesem Artikel erwähnten „Zeichen“ keine derartigen allgemeinen Zeichen. Das Gleiche gilt unten und ich werde nicht näher darauf eingehen.

1. Verstehen Sie einige Eigenschaften von Charakteren

1. Sehen Sie die Wahrheit <br />Was die Zeichen betrifft, so verstehe ich sie so, dass sie dasselbe sind wie die chinesischen Schriftzeichen, englischen Buchstaben usw. auf der Seite. Erstens besteht das Zeichenmuster auf dem Display aus Pixeln derselben Farbe, sodass es keine Probleme mit gezackten Kanten gibt. Wenn Sie mit Photoshop ein kleines Dreiecksbild erstellen, treten möglicherweise hässliche weiße Kanten auf, aber bei Zeichen tritt dieses Problem nie auf. Zweitens bestehen Zeichen grundsätzlich aus Text und unterliegen CSS-Eigenschaften wie Schriftgröße und Farbe, die sich auf den Text auswirken.

2. Vorteile der Verwendung von Zeichen anstelle von Bildern: ① Es müssen keine Bilder gezeichnet oder ausgeschnitten werden, was viel Aufwand spart! Für Seiteningenieure wird der Arbeitsaufwand erheblich reduziert. Sie wissen, dass die Bearbeitung kleiner Bilder mit weniger als 10 Pixeln sehr zeit- und energieaufwendig ist.
② Machen Sie sich keine Sorgen über das Problem der Rauschränder. Die Zeichen bestehen alle aus einfarbigen Pixeln, daher treten kaum Rauschränder auf.
③Einfach zu steuern! Wenn Sie das Zeichenmuster vergrößern möchten, erhöhen Sie einfach die Schriftgröße. Wenn Sie die Farbe ändern möchten, verwenden Sie Farbe. Die Charaktere verhalten sich also sehr gut und sind leicht zu steuern. Wenn es ein Bild ist, versuchen Sie, seine Farbe zu ändern. Sie sind nicht Liu Qian und Sie sind nicht Harry Bit, also können Sie das nicht tun.
④Die Seitenladegröße ist kleiner geworden. Jeder, der sich mit Computern beschäftigt, sollte wissen, dass ein englisches Zeichen ein Byte und ein chinesisches Zeichen zwei Bytes umfasst. Ich weiß zwar nicht, ob die einzelnen Zeichen Patriotismus oder Anbiederung an Ausländer darstellen, aber auf jeden Fall sind es höchstens zwei Bytes (Einheit b). Wenn es sich um ein Bild handelt, sollte es meiner Erfahrung nach mehr Platz einnehmen als die Zeichen, obwohl ich es nicht überprüft habe.
⑤Theoretisch gibt es weniger Seitenlinkanfragen. Warum heißt es theoretisch? Weil in Wirklichkeit die Bilder in ein Bild integriert sind (CSS-Sprite). Selbst wenn also ein kleines Bild fehlt, bleibt die Anzahl der Bildanforderungen der gesamten Seite unverändert. Was aber, wenn dieses kleine Bild unabhängig ist? Würde das nicht eine Bildanfrage weniger bedeuten? Dann wird sich der Server freuen!

3. Zeichenfehler ① Leistung in verschiedenen Browsern.
Nehmen wir nun an, dass der IE-Browser China und der Firefox-Browser Südkorea repräsentiert. Eine Chinesin (♀) ging nach Südkorea und sah am Ende völlig anders aus. Der Begriff lautet: Manche Zeichen verhalten sich in verschiedenen Browsern unterschiedlich. Diese Art von Inkonsistenz kann in zwei Kategorien unterteilt werden. Die eine Art ist auf plastische Chirurgie zurückzuführen, bei der das Gesicht verändert wird. Dafür gibt es keine Hoffnung. Es ist schwieriger, in die Vergangenheit zurückzukehren, als Lin Chiling um eine Rückenmassage zu bitten. Die andere Art ist auf Schönheitsbehandlungen zurückzuführen. Wenn man beispielsweise etwa einen Monat lang Kosmetik von Chanel oder Estee Lauder verwendet, ist das Ergebnis eine große Verwandlung von Schwester Furong in ein wunderschönes Entlein. Dafür gibt es noch Hoffnung. Wenn man sie zwei Monate lang als Programmiererin arbeiten lässt, wird sie garantiert in die Vergangenheit zurückkehren. Programmierer zu sein ist einfach ein Witz. Tatsächlich wird Konsistenz im Ausdruck durch die Festlegung der Schriftart (Schriftfamilie) erreicht, was später in diesem Artikel erläutert wird.
②Größe und Positionierung sind schwer zu kontrollieren.
Zeichen unterscheiden sich grundsätzlich von Bildern und haben keine klare Höhe und Breite. Wenn Sie die Eigenschaften des Textes auf der Seite nicht gut verstehen, ist es schwierig, eine genaue und kompatible Positionierung zu erreichen. Hinzu kommt die Art und Weise, wie die Zeichen auf der Seite kodiert werden und welche Schriftarten empfindlich sind. Beispielsweise werden einige Zeichen in der chinesischen Kodierung gb3212 gut angezeigt, sind in der Kodierung utf-8 jedoch nur quadratische Kästchen – also unleserliche Zeichen. In Songti werden sie gut angezeigt, sehen in anderen Schriftarten jedoch anders aus.
③ Es kann kein Farbverlaufseffekt erzielt werden.

2. Einige Beispiele zur Beziehung zwischen Zeichen und Schriftarten

Der erste Teil der Demoseite zeigt einige Zeichen, die im Hauptteil dieses Artikels verwendet werden können, und wie sie in gängigen Schriftarten aussehen. Das Bild unten zeigt repräsentative Zeichenunterschiede. Die Unterschiede werden durch unterschiedliche Schriftarten und Browser verursacht. Glücklicherweise können wir Kompatibilität erreichen, indem wir verschiedene Schriftarten ausprobieren.

Unterschiede zwischen Zeichen in verschiedenen Schriftarten und Browsern

3. Verwenden Sie Zeichen, um abgerundete Rechtecke und scharfe Ecken zu erzielen

Um mit Hilfe von Zeichen abgerundete oder scharfe Ecken zu erzielen, können folgende Zeichen verwendet werden:
Spitzer Winkel nach links und rechts „＜＞“; spitzer Winkel nach oben und unten „∧∨“; durchgezogener spitzer Winkel „► ◄ ▲▼“; durchgezogener Kreis: „ ● “; hohler Kreis „ ○ “; Viertel-Hohlkreis „╰ ╯╭ ╮“ und normales Prisma „◆“. 1. Die Beziehung zwischen Schriftarten und Zeichenanzeige

Die scharfen Ecken auf der linken und rechten Seite sind in der Schriftart Songti: <>
Nicht betroffen von der Schriftart: ＜＞

Hier sind die scharfen Ecken links und rechts in der Schriftart Arial: <>
Nicht betroffen von der Schriftart: ＜＞

Die scharfen Ecken auf der linken und rechten Seite sind in Lucida Sans Unicode: <>
Nicht betroffen von der Schriftart: ＜＞

Die scharfen Ecken links und rechts sind hier in der Schriftart Times New Roman: <>
Nicht betroffen von der Schriftart: ＜＞

Die scharfen Ecken auf der linken und rechten Seite sind in der Schriftart Verdana: <>
Nicht betroffen von der Schriftart: ＜＞

Hier sind die scharfen Ecken in Auf- und Abwärtsrichtung in der Schriftart Songti mit kleinen scharfen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Hier sind die spitzen Ecken in Auf- und Abwärtsrichtung in der Schriftart Arial gehalten, mit kleinen spitzen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Die scharfen Ecken in der oberen und unteren Richtung sind in der Unicode-Schriftart Lucida Sans, kleine scharfe Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Die spitzen Ecken in der oberen und unteren Richtung sind in der Schriftart Times New Roman gehalten, mit kleinen spitzen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Hier sind die scharfen Ecken in Auf- und Abwärtsrichtung in der Schriftart Verdana mit kleinen scharfen Ecken: ˇ^
Nicht betroffen von der Schriftart: ∧∨

Hier ist ein 45-Grad-Winkel, die Schriftart ist Songti: ∠

Hier ist ein 45-Grad-Winkelkörper in der Schriftart Arial: ∠

Hier ist ein 45-Grad-Winkel in Lucida Sans Unicode :

Hier ist ein 45-Grad-Winkel in der Schriftart Times New Roman: ∠

Hier ist ein 45-Grad-Winkel in der Schriftart Verdana: ∠

Hier ist eine solide scharfe Ecke, die Schriftart ist Songti: ► ◄ ▲▼

Hier ist die durchgezogene scharfe Ecke, die Schriftart ist Arial: ► ◄ ▲▼

Hier ist die durchgezogene Ecke, die Schriftart ist Lucida Sans Unicode: ► ◄ ▲▼

Hier sind die durchgezogenen scharfen Ecken, die Schriftart ist Times New Roman: ► ◄ ▲▼

Hier ist die durchgezogene scharfe Ecke, die Schriftart ist Verdana: ► ◄ ▲▼

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Songti: ●

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Arial: ●

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Lucida Sans Unicode: ●

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Times New Roman: ●

Hier ist ein ausgefüllter Kreis. Aufgrund seiner begrenzten Größe verhält er sich wie ein sechseckiger Körper. Die Schriftart ist Verdana: ●

Hier ist ein hohler Kreis mit der Schriftart in Songti: ○

Hier ist ein hohler Kreis mit der Schriftart Arial: ○

Hier ist ein hohler Kreis in Lucida Sans Unicode: ○

Hier ist ein hohler Kreis in der Schriftart Times New Roman: ○

Hier ist ein hohler Kreis mit der Schriftart Verdana: ○

Hier ist ein Viertelbogen, die Schriftart ist Songti: ╰ ╯╭ ╮

Hier ist ein Viertelkreis in der Schriftart Arial: ╰ ╯╭ ╮

Hier ist ein Viertelkreis in Lucida Sans Unicode: ╰ ╯╭ ╮

Hier ist ein Viertelkreis in Times New Roman: ╰ ╯╭ ╮

Hier ist ein Viertelbogen in Verdana: ╰ ╯╭ ╮

4. Implementieren eines abgerundeten Rechtecks ​​mit einem einfarbigen Hintergrund

Füllen Sie die vier Ecken mit einem Viertelkreis, um mit der Hintergrundfarbe einen abgerundeten Eckeneffekt zu erzielen.