デザイナーが特別なイベントのタイトルフォントとして以下のフォントを使用したい場合はどうすればよいでしょうか?それを絵にしてみましょう。次に、さまざまな画面への適応に関する次の問題が発生する可能性があります。 1 つのサイズの画像のみを作成すると、拡大または縮小した後の効果はあまり良くありません。直接 SVG に?どうやら、Wordにコピーして太字にすることは不可能のようです。つまり、この方法では「テキスト」自体が本来のテキストが持つべき機能を失ってしまいます。 ここで、カラーフォントの利点が発揮されます。視覚効果の要件を満たすだけでなく、通常のテキストの機能も備えており、通常の操作を妨げることなく、コピー、貼り付け、スクリーン リーダーによる読み取りが可能です。
カラーフォントとは何ですか? カラーフォントの初見 私たちがよく知っている従来のフォントでは、フォント ファイル自体はフォントの外観の特徴のみを記述しており、これには通常、ベクター アウトライン データまたはモノクロ ビットマップ データが含まれます。ブラウザがモノクロフォントをレンダリングする場合、レンダリング エンジンは設定されたフォントの色でグリフ領域を塗りつぶし、最後に対応するテキストとその設定された色を描画します。カラー フォントは、フォントの外観の特徴だけでなく、色情報も保存し、フォント内でさまざまな配色を提供することもできるため、柔軟性が向上し、外観の詳細がより豊かになります。 日常的に最もよく使われるカラーフォントは絵文字表現です。たとえば、Windows 10 では、Segoe UI Emoji はカラー フォントです。 通常、カラー フォントには互換性情報も含まれており、これには Unicode でエンコードされたモノクロ グリフ データが含まれます。そのため、カラー フォントをサポートしていない一部のプラットフォームでも、カラー フォントのグリフを通常のフォントのようにレンダリングできるため、下位互換性効果が実現されます。 カラーフォントの実装標準 カラーフォントデザインの歴史では、各社が独自の実装計画を持っており、OpenType フォントに埋め込まれるカラー情報の標準が異なっています。最新の OpenType 標準では、カラーフォント データの記述形式が最大 4 つあります。
さまざまな標準のブラウザサポート
非常に多くの標準と不均一なブラウザサポートを見ると、互換性のために UA に従って異なる形式でフォントを配布する必要があるのではないかと疑問に思うかもしれません。さようなら! ちょっと待ってください、若者よ! 2016年、大手メーカーはついにカラーフォントの標準としてOpenType SVGを採用することに合意しました。これは前述のSVGであり、現在W3Cが採用している標準でもあります。近い将来、すべての主要メーカーのブラウザが W3C が使用する SVG 標準を徐々にサポートするようになると思います。 フォントモジュール標準の現状 CSS フォント モジュール レベル 3: 現在は候補推奨状態にあり、主流のブラウザーでほぼ実装されている標準です。候補標準の最新版は、今年 6 月 26 日に公開されました。レベル 3 標準は、以前の CSS3 フォントと CSS3 Web フォントに基づいており、フォント読み込みイベントに関連する標準を CSS フォント読み込みモジュールに移行します。 CSS フォント モジュール レベル 4: レベル 3 の次世代標準。現在ワーキング グループのドラフト状態にあり、最新のドラフトは 4 月 10 日に更新されました。このドラフト版はレベル 3 に基づいており、追加された新しい属性には、この記事で紹介するカラー フォントのサポートが含まれます。 CSS カラーフォント カラーフォントをサポートするブラウザでは、フォントは正しくレンダリングされますが、フォントに組み込まれている他の色の使用を制御することはできません。レベル 4 標準では、カラー フォントをより適切に使用できるように、カラー フォントに関連するいくつかの新しい標準が追加されました。次に見てみましょう。 フォントの色を選択: font-palette 先ほど、カラーフォントには CPAL テーブルを通じてさまざまなカラースキームを設定できることを学びました。
例: h1 { フォントファミリー: Segoe UI Emojil フォントパレット: ライト } カスタムフォントカラー: @font-palette-values 基本的な定義ルールは 以下に、3 つの主要な属性について説明します。 フォントファミリー まず、フォントの配色を設定する場合、どのフォントに配色情報を設定するのかを指定する必要があります。現在の色設定は @font-palette-values スノー{ フォントファミリー: TriColor; } ベースパレット 作成者がカラーフォントを作成する場合、多くの場合、さまざまなフォントカラースキームを組み込みます。この情報を保存するとき、それぞれの異なるカラースキームには、対応する独自の @font-palette-values スノー{ フォントファミリー: TriColor; ベースパレット: 5; } カラー-x 画像クレジット: typography.guru 上の画像は、COLR がグリフをレイヤー化する方法を示しています。 COLR はグリフの各部分をレイヤーに分割し、それらのレイヤーを特定の順序で完全なフォントに結合します。各レイヤーは CPAL のカラー情報を使用して色付けされます。より強力なカスタマイズ効果を実現するために、標準では @font-palette-values RedSnow { フォントファミリー: TriColor; ベースパレット: 5; 色1: rgb(255, 0, 0); } 上記の例は レベル4のその他の注目すべき新しい属性 フォントの最小サイズ、フォントの最大サイズ プロパティ名が示すように、これら 2 つのプロパティは 要約する フォント モジュール レベル 4 には、興味深い新機能が多数あります。具体的な効果や標準的な改善点は、主要ブラウザーがサポートを開始してからでないとわかりません。しばらくお待ちください。 この記事内のリンク https://docs.microsoft.com/en-us/typography/opentype/spec/otff 参考文献 https://www.w3.org/TR/css-fonts-4/ 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Vueのフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明
>>: Tomcat の設定と Eclipse での起動方法
1. 現在のホスト名を表示する [root@fangjian ~]# ホスト名ctl 静的ホスト名:...
最近、ポップアップ広告に取り組んでいました。デフォルト ページには z-index が設定されていな...
この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具...
インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...
この記事は主に、一定の参考値を持つ純粋な HTML + CSS によって実現されるタイピング効果を紹...
ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...
目次1. classList属性2. 実用化以前の JavaScript では、最初にクラス属性を取...
この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...
1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...
始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...
目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....
ナビゲーションなどは日々の開発でよく使うので、記録として記事を書きます。ナビゲーションは終了/開始位...
Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...
序文Linux が完全にセットアップされると、クローン機能を使用して短時間で複数の Linux を作...
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...