Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリーンショットを撮ったのは今回が 2 回目です)。 1. キャラクターの特徴を理解する 1. 真実を見る<br />文字については、ページ上の漢字や英語の文字などと同じものだと理解しています。まず、文字パターンはディスプレイ上で同じ色のピクセルで構成されているため、ギザギザのエッジで困ることはありません。Photoshop で小さな三角形の画像を作ると、嫌な白いエッジが出ることがありますが、文字ではこの問題が発生することはありません。第二に、文字は本質的にテキストであり、テキストに影響を与えるフォント サイズや色などの CSS プロパティの対象となります。 2. 絵ではなく文字を使うメリット: ① 絵を描いたり切り取ったりする必要がないので、手間が省けます!ページ エンジニアにとっては、作業負荷が大幅に軽減されます。ご存知のように、10 ピクセル未満の小さな画像の処理には、非常に時間と労力がかかります。 3. 文字の欠陥① 異なるブラウザでのパフォーマンス。 2. 文字とフォントの関係の例 デモ ページの最初の部分では、この記事の本文で使用される可能性のあるいくつかの文字と、それらが一般的なフォントでどのように表示されるかを示します。下の図は、代表的な文字の違いを示しています。違いは、フォントとブラウザの違いによって発生します。幸いなことに、異なるフォントを試すことで互換性を確保できます。 ![]() 異なるフォントやブラウザでの文字の違い 3. 文字を使って丸みのある長方形と鋭角な角を実現する 文字を使用して丸い角や鋭い角を実現するには、次の文字を使用できます。 左側と右側の鋭角部分は 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コンテナをインストールするための実装手順
ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
1. 現在の日付 DATE_SUB(curdate(),INTERVAL 0 DAY) を選択します...
目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...
JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...
はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...
Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...
会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...
目次序文コアコードコードのファイル表示部分序文この記事では主に、Vue プロジェクトでの添付ファイル...
Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...
目次1. フロントエンドルーティングの実装原則2. vue-Routerの基本的な使い方2.1. イ...
目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...
最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...
1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...