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

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

Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリーンショットを撮ったのは今回が 2 回目です)。
gmail上使用字符的截圖
写真の赤い円の中にある小さな下向きの三角形は、使用されている文字であり、非主流の文字です。実は、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 の実円で塗りつぶします。


コードをコピー
コードは次のとおりです。

<div class="sharp_square">
<span class="quarter_round round_lt"><span class="lt">●</span></span>
<span class="quarter_round round_rt"><span class="rt">●</span></span>
<span class="quarter_round round_lb"><span class="lb">●</span></span>
<span class="quarter_round round_rb"><span class="rb">●</span></span>
</div>


コードをコピー
コードは次のとおりです。

.sharp_square{width:333px; height:110px; background:#a0b3d6; position:relative; color:#a0b3d6;}/*IE6 には偶奇バグがあります。1 ピクセルのエラーを回避するには、高さと幅を偶数にする必要があります*/
.sharp_square .quarter_round{位置:absolute;}
.sharp_square .quarter_round span{background:white;}
.sharp_square .round_lt{左:-1px; 上:0px;}
.sharp_square .round_rt{右:-1px; 上:0px;}
.sharp_square .round_lb{左:-1px; 下:0px;}
.sharp_square .round_rb{右:-1px; 下:0px;}


<<:  DockerにRedisコンテナをインストールするための実装手順

>>:  MySQL の結合クエリとサブクエリの問題

推薦する

WeChatミニプログラム公式顔認証の詳しい説明

ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...

React構成サブルーティングの実装

1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

JavaScriptのプリコンパイルを見てみましょう(概要)

JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...

React Nativeの起動プロセスの詳細分析

はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...

Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明

Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...

Win10にnginxをインストールする方法

会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...

Vueで複数の添付ファイルをアップロードする実装例

目次序文コアコードコードのファイル表示部分序文この記事では主に、Vue プロジェクトでの添付ファイル...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

Vue-Routerのインストールプロセスと原理の詳細

目次1. フロントエンドルーティングの実装原則2. vue-Routerの基本的な使い方2.1. イ...

Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

CSSレイアウトで中央揃えレイアウトを実現する方法

1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...