丸い角や鋭い角を表現するために、絵の代わりに文字を使用する研究

Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリーンショットを撮ったのは今回が 2 回目です)。

写真の赤い円の中にある小さな下向きの三角形は、使用されている文字であり、非主流の文字です。実は、Google キャラクターは小さなアプリケーションに過ぎず、その真の潜在力はまだ発揮されていません。この記事では、画像でしか実現できないと思われる鋭角効果や、主に画像で実現されている丸角効果を、画像ではなく文字を使用して実現する方法を先駆的に探ります。キャラクターの飛行については、まだ深く研究していないので、結論や方法の一部は最適ではありません。将来的にはより完璧な方法が登場する可能性があるため、この記事のタイトルにはテスト中であることを示すために「ベータ」という単語が追加されています。この記事で紹介した方法のいくつかは、実際のプロジェクトでは実用的ではないかもしれません。重要なのは、同僚の思考を広げ、Web 開発におけるキャラクターの可能性を示すことです。
注: この記事で「文字」とは、主にキーボードで直接入力できない特殊な形状の文字を指します。英語のABCも文字とみなされますが、この記事で言う「文字」にはそのような一般的な文字は含まれません。以下も同様で、詳細は割愛します。

1. キャラクターの特徴を理解する

1. 真実を見る<br />文字については、ページ上の漢字や英語の文字などと同じものだと理解しています。まず、文字パターンはディスプレイ上で同じ色のピクセルで構成されているため、ギザギザのエッジで困ることはありません。Photoshop で小さな三角形の画像を作ると、嫌な白いエッジが出ることがありますが、文字ではこの問題が発生することはありません。第二に、文字は本質的にテキストであり、テキストに影響を与えるフォント サイズや色などの CSS プロパティの対象となります。

2. 絵ではなく文字を使うメリット： ① 絵を描いたり切り取ったりする必要がないので、手間が省けます！ページ エンジニアにとっては、作業負荷が大幅に軽減されます。ご存知のように、10 ピクセル未満の小さな画像の処理には、非常に時間と労力がかかります。
②ノイズエッジの問題を心配する必要はありません。文字はすべて単色ピクセルなので、ノイズエッジが発生しにくいです。
③操作が簡単！文字パターンを大きくしたい場合は、フォントサイズを大きくしてください。色を変えたい場合は、color を使用してください。そのため、キャラクターは非常に行儀がよく、制御しやすいです。写真の場合は、色を変えてみてください。あなたは劉倩でもハリー・ビットでもないので、それはできません。
④ページの読み込みサイズが小さくなりました。コンピューターを勉強する人なら誰でも、英語の 1 文字は 1 バイト、中国語の 1 文字は 2 バイトであることを知っているはずです。各種の文字が愛国心を表すのか、外国人へのおべっかなのかは分かりませんが、いずれにしてもせいぜい2バイト（単位b）です。絵であれば、検証はしていませんが、経験上、文字よりも多くのスペースを占めるはずです。
⑤理論上、ページリンクリクエストが少なくなります。なぜ理論的と呼ばれるのか？それは、実際には画像が 1 つの画像 (css スプライト) に統合されているため、小さな画像が 1 つ欠けていても、ページ全体が画像を要求する回数は変わらないためです。しかし、この小さな写真が独立したものだったらどうなるでしょうか? そうすると、写真のリクエストが 1 つ減るのではないでしょうか?そうすればサーバーは幸せになります!

3. 文字の欠陥① 異なるブラウザでのパフォーマンス。
ここで、IE ブラウザが中国を表し、Firefox ブラウザが韓国を表していると仮定します。中国人女性（♀）が韓国に行って、見た目が全く変わってしまいました。用語は次のとおりです: 一部の文字はブラウザによって動作が異なります。このような矛盾は2つの種類に分けられます。1つは整形手術によるもので、顔が変わります。これには望みがありません。過去に戻るのは、リン・チーリンに背中のマッサージをしてもらうよりも難しいです。もう1つは美容トリートメントによるものです。たとえば、シャネルやエスティローダーの化粧品を1か月ほど使用すると、芙蓉姉さんから美しいアヒルの子に大きく変わります。これにはまだ望みがあります。彼女に2か月間プログラマーとして働かせれば、過去に戻ることが保証されます。プログラマーであることは単なる冗談です。実際には、フォント (font-family) を設定することで表現の一貫性が実現されます。これについては、この記事の後半で説明します。
②大きさや位置のコントロールが難しい。
文字は本質的に画像とは異なり、明確な高さや幅がありません。ページ上のテキストの特性をよく理解していないと、正確で互換性のある配置を実現することは困難です。また、ページ上で文字がエンコードされる方法や、どのフォントが敏感であるかという問題もあります。たとえば、一部の文字は、gb3212 中国語エンコードでは適切に表示されますが、utf-8 エンコードでは単なる四角いボックス (文字化けした文字) として表示されます。また、Songti では適切に表示されますが、他のフォントでは異なって見えます。
③グラデーション効果が得られない。

2. 文字とフォントの関係の例

デモ ページの最初の部分では、この記事の本文で使用される可能性のあるいくつかの文字と、それらが一般的なフォントでどのように表示されるかを示します。下の図は、代表的な文字の違いを示しています。違いは、フォントとブラウザの違いによって発生します。幸いなことに、異なるフォントを試すことで互換性を確保できます。

異なるフォントやブラウザでの文字の違い

3. 文字を使って丸みのある長方形と鋭角な角を実現する

文字を使用して丸い角や鋭い角を実現するには、次の文字を使用できます。
左右方向の鋭角「＜＞」、上下方向の鋭角「∧∨」、実線の鋭角「► ◄ ▲▼」、実線の円「 ● 」、白抜きの円「 ○ 」、四分の一白抜きの円「╰ ╯╭ ╮」、正角柱「◆」。 1. フォントと文字表示の関係

左側と右側の鋭角部分は Songti フォントで表示されます: <>
フォントの影響を受けない：＜＞

ここでは、左と右の鋭角な角は Arial フォントで表示されます: <>
フォントの影響を受けない：＜＞

左側と右側の鋭角な角は Lucida Sans Unicode で表されます: <>
フォントの影響を受けない：＜＞

ここで、左と右の鋭角な角は Times New Roman フォントで表示されます: <>
フォントの影響を受けない：＜＞

左側と右側の鋭角部分は Verdana フォントで表示されます: <>
フォントの影響を受けない：＜＞

ここでは、上下方向の鋭角は、小さな鋭角のソンティフォントで表されています: ˇ^
フォントの影響を受けない: ∧∨

ここでは、上下方向の鋭角は Arial フォントで、小さな鋭角の角があります: ˇ^
フォントの影響を受けない: ∧∨

上方向と下方向の鋭角は Lucida Sans Unicode フォントで、小さな鋭角: ˇ^
フォントの影響を受けない: ∧∨

上と下の鋭角部分は Times New Roman フォントで、小さな鋭角部分があります: ˇ^
フォントの影響を受けない: ∧∨

ここでは、上下方向の鋭角は Verdana フォントで、小さな鋭角の角があります: ˇ^
フォントの影響を受けない: ∧∨

こちらは45度の角度、フォントはSongtiです: ∠

これはArialフォントで書かれた45度の鋭角の立体です: ∠

以下は Lucida Sans Unicodeでの 45 度の角度です。

45度の角度をTimes New Romanフォントで表すと次のようになります: ∠

45度の角度をVerdanaフォントで表すと次のようになります: ∠

これはしっかりした鋭角の角です。フォントは Songti です: ► ◄ ▲▼

これは、しっかりした鋭角の角です。フォントは Arial です: ► ◄ ▲▼

こちらは実線の角です。フォントは Lucida Sans Unicode です: ► ◄ ▲▼

こちらは角がしっかりしていて、フォントはTimes New Romanです: ► ◄ ▲▼

これはしっかりした鋭角の角です。フォントは Verdana です: ► ◄ ▲▼

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Songti です: ●

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Arial です。 ●

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Lucida Sans Unicode です。 ●

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Times New Roman です。 ●

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Verdana です: ●

ここにソンティ文字のフォントで書かれた中空の円があります: ○

ここに Arial フォントの白抜きの円があります: ○

これは Lucida Sans Unicode の白抜きの円です: ○

これは Times New Roman フォントの白抜きの円です: ○

ここに Verdana フォントの白抜きの円があります: ○

これは四分の一弧です。フォントは Songti です: ╰ ╯╭ ╮

Arial フォントの四分の一円は次のとおりです: ╰ ╯╭ ╮

Lucida Sans Unicode の四分の一円は次のとおりです: ╰ ╯╭ ╮

これはTimes New Romanで書かれた四分の一円です: ╰ ╯╭ ╮

ヴェルダナ語で四分の一弧は次のようになります: ╰ ╯╭ ╮

4. 単色の背景に角丸四角形を実装する

背景色で丸みを帯びた角の効果を実現するには、4 つの角を 1/4 の実円で塗りつぶします。