本質的なタイポグラフィは、Web上のスタイリングテキストの未来です-CSSチュートリアル-php.cn

テキストのスタイル方法は、長年にわたってあまり変わっていません。レイアウトなど、物事をより柔軟にするのに役立つ多くの進歩がありましたが、スタイリングの点では、テキストのようなデザインの最も有限の側面は比較的変わらないままです。これは特にテキストスタイリングに当てはまります。レイアウトのすべての部分に対して明示的にテキストをスタイルするコードを作成し、それを応答するようにするために、すべてのブレークポイントで機能するためにより多くのコードを書きます。これは、テキストのさまざまな領域が圧縮および拡張するにつれて、コンテンツが壊れる直前に緊張 - 触知可能な体験的な緊張であることを意味します。これらの場所では、コンテンツはサイズが大きくなっていないことに苦しんでいますが、その間、過度に複雑で脆性コードによってサポートされています。

本質的なタイポグラフィはこれらすべてをシフトし、スタイリングに影響を与えるためにコード自体から開始することでそれをクリアします。明示的なテキストスタイルを書く代わりに、これらのスタイルがテキストの領域に比例してどのように変化するかを定義します。これにより、よりレイアウトのバリエーションで、より柔軟なテキストコンポーネントを使用できます。それはあなたのコードを簡素化し、新しいレイアウトの可能性の機会を増やします。本質的なタイポグラフィは、テキストがレンダリングされている領域に自己調整するように機能します。すべてのブレークポイントの各コンポーネントのサイジングと間隔テキストの代わりに、テキストには配置された領域に応答するように指示が与えられます。その結果、本質的なタイポグラフィにより、設計がはるかに柔軟になり、コードがはるかに少ない領域に適応します。

クランプを超えたタイポグラフィ超大国（）

本質的なタイポグラフィを使用した結果は、Clamp（）などのツールで可能なことをはるかに超えています。本質的なタイポグラフィスタイリングは、要素クエリのコンポーネントポータビリティをCSSアニメーションの補間制御とブレンドし、コンテナ幅全体の値のシームレスな変更を可能にします。この手法により、他のCSSテクニックでは不可能なものが可能になります。たとえば、要素の領域が変化するにつれて、可変フォント設定、色、ユニットレスラインハイトを流動的に調整します。また、Clamp（）のアクセシビリティの落とし穴を避け、ブラウザのデフォルトフォントサイズを変更すると、相対ユニットを使用するときにブレークポイントとの整合からタイポグラフィがシフトします。

これはレスポンシブタイポグラフィとどう違うのですか？

レスポンシブタイポグラフィは、テキストを変換するためのビューポートを参照します。これは、メディアクエリ、クランプ（）、またはCSSロックを介して行います。これらの手法により、画面サイズ全体でタイポグラフィの粒状制御が可能になりますが、さまざまなコンポーネントのタイポグラフィを制御する能力がありません。これは、さまざまなサイズのコンテンツ領域の配列があるページの場合、レスポンシブタイポグラフィアプローチを備えたこれらの各領域に新しい見出しスタイルを作成する必要があることを意味します。

本質的なタイポグラフィはそれをすべて必要としません。本質的なタイポグラフィを使用すると、すべての異なるコンテンツ領域で単一の見出しスタイルを使用できます。離散ヘッドラインスタイルは、1つの固有の見出しに統合できます。これは、要素クエリとメディアクエリの違いと同様の区別です。要素クエリを使用すると、すべてのスケーリング情報をコンポーネントにバインドすることができます。

本質的なスタイルの解剖学

上記の本質的なヘッドラインスタイルを取り、その中のすべてのバリエーションを押し出した場合、それは次のようになります。

ページの広い領域内では、テキストはより大きく、大胆で、広くなるように型に留めています。ページの小さな領域では、テキストは小さく、軽く、狭くなっています。見出しがレンダリングされる領域が測定され、その特定の見出しに使用されるこの固有の見出しスタイルから適切なスライスが取られます。

この押し出された見出しスタイルの形状についていくつかのことに気付くかもしれません。テキストは小さくて大きくなりますが、形状自体には曲線があります。ある時点から別のポイントへのテキストスケーリングをどのように制御するかは、最適な読みやすさを確保するために画面が小さくなるため、特に役立ちます。以下に、同じスタイルのセットが2つのテキストに適用されていることがわかります。湾曲した本質的な例では、テキストは、より速すぎる線形補間を使用した例と比較して、より多くの場所では非常に読みやすいものです。

レイアウトのサイズと領域にわたってテキストスタイリングを補間する能力を組み合わせて、それらの設定がどのように補間されるかを形成することにより、本質的なタイポグラフィは、デザイナーが画面またはコンポーネントサイズでテキストをレンダリングする方法を前例のない量の制御を提供します。

本質的にタイプセット

Typeturaは、本質的なタイプセット機能をCSSに追加するためのツールを開発しました（私は作成者です。）このツールにより、必要なタイポグラフィスタイルを書くことができ、以前はなかった柔軟性を注入します。内因性スタイルは、親要素の幅に基づいてCSSキーフレームに保存され、変更されます。これにより、要素の幅全体にアニメーション可能なプロパティを補間することができます。要素クエリの例を参照するには、補間された要素クエリを考えてください。

キーフレームをセットアップするには、0％が0pxのコンテナ幅に等しく、キーフレーム100％はスタイルがカバーする最大容器幅です。この値はデフォルトでは1600pxです。コンテナは、ルート要素をデフォルトのコンテナとして、クラスTypeturaを要素に追加することで定義できます。子要素は、新しいコンテキストが定義されていない限り、親のコンテキストの幅に基づいてスタイルとなっています。

 @KeyFramesヘッドライン{
  0％{
    フォントサイズ：1rem;
  }
  100％{
    フォントサイズ：4rem;
  }
}

ログイン後にコピー

これらのスタイルを要素に添付するには、カスタムプロパティ（tt-key）を使用します。これで、最初の本質的なスタイルを見ることができます。

 @KeyFramesヘッドライン{
  0％{
    フォントサイズ：1rem;
    ラインハイト：1.1;
  }
  100％{
    フォントサイズ：4rem;
    Line-Height：1;
  }
}

.headline {
  -TT-KEY：見出し;
}

ログイン後にコピー

これらのスタイルをどのように拡張するかを形作るには、カスタムプロパティ（TT-EASE）を使用します。このプロパティは、CSS緩和機能とキーワードを受け入れます。これにより、ベースフォントサイズを迅速に持ち上げたり、ヘッドラインのスケーリングと間隔をテーパーしたりすることができます。さらに、これらのスタイルがカバーしている範囲を制約することができます-tt-maxは、レイアウトの制約とテキストの使用をより適切に適合させることができます。

 @KeyFramesヘッドライン{
  0％{
    フォントサイズ：1rem;
    ラインハイト：1.1;
  }
  100％{
    フォントサイズ：4rem;
    Line-Height：1;
  }
}

.headline {
  -TT-KEY：見出し;
  -TT-MAX：600;
  --tt-ease：ease-in-out;
}

ログイン後にコピー

次の例は、そのすべてのテキストが本質的なタイポグラフィスタイルによって駆動されたときのページがどれほど柔軟であるかを示しています。ドキュメントのルートから。テキストは、会議室にサービスを提供するモニターから時計のサイズのサイズまでシームレスに移行できます。すべてメディアクエリがありません。テキストスタイルは、さまざまなモジュールで共有することもできます。たとえば、ページの上部と次のクリック領域の見出しの見出しはすべて同じスタイルによって駆動されます。効率は任意のサイズのWebサイトですぐに表示されますが、それらはすぐに悪化します。

このペンをチェックしてください。その中に、本質的なスタイルインスペクターを追加して、各見出しをクリックしてレンダリングされたサイズが何であるかを確認できます。検査官内では、本質的なスタイルの形状と上限を操作することもできます。これにより、Typeturaが有効にするためのタイポグラフィのスタイリングの可能性を確認し始めることができます。

本質的なタイポグラフィは、ウェブ上のスタイリングの未来です

これらのデザインルールをコンテンツに焼くことは、本質的なデザインの実践であり、これらのルールをテキストに焼くことは、本質的なタイポグラフィの実践です。 Jen Simmonsが作成した本質的なWebデザインは、一般的なデザインの突然変異が私たちのコンポーネントのまさにファブリックに焼き付けられる概念です。個々のコンテンツのスタイルを明示的に述べる代わりに、本質的なレイアウトには設計上の制約が与えられ、私たちのコンテンツは、明示的にスタイルを定義するのではなく、環境に応答します。このアプローチは、コードベースを簡素化し、デザインの柔軟性を高めます。コンポーネントには、ビューポート以上のものに対応するのに役立つ指示があります。

Typeturaは、この哲学をテキストスタイリングにもたらします。テキストコンポーネントが私たちの最も基本的なデザイン素材であり、ほぼすべてのコンポーネントで再利用される素材であるため、本質的なタイポグラフィは他の方法論よりも大きな利点があります。設計の回復力、スケーラビリティ、およびコードの簡素化の利点は、プロジェクトに深く存在し、その寿命を延ばします。時計のサイズまたはテレビのサイズまでスケーリングし、テキストがレイアウトに到達できるかどうかを制限した場合、それはあなたの野望をサポートします。

以上が本質的なタイポグラフィは、Web上のスタイリングテキストの未来ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。