どのように自動CSSのフォントサイズを調整してフォントサイズを調整するには?

6072 ワード
cssfont automationtesting crossbrowsetesting css テキストリンク
多くの開発者は、Webページのより良い表現を持つために複数のフォントファミリーとフォントサイズを使用します.たとえば、開発者は体のためのタイトルとRobotoフォントのための太字の漫画のフォントを使用することがあります.しかし、多くのブラウザがすべてのフォントをサポートしないので、これはあなたのウェブサイトを乱雑に見えさせるかもしれません.CSSのフォントサイズを調整するプロパティは、フォントサイズを自動調整することによってそのような状況を避けることができます.
CSSのフォントサイズの調整は、フォントサイズ、ピクセル、em、rem、キーワード、ビューポート単位などの表示内のいくつかの単位を受け入れる.CSSクラスとIDに適用されます.したがって、それはあなたの最初のフォントの選択がロードされない場合は、フォントサイズ内の重要な減少を停止するために大きなハックとして使用することがあります.
ただし、CSSのフォントサイズを調整する前に、CSSフォントサイズプロパティを見てみましょう.

フォントサイズ


CSSフォントサイズのプロパティは、フォントに基づいてグリフの希望の高さを示します.スケーラブルなフォントでは、スケーラブルなファクタを適用してフォントサイズを計算します.しかし、非スケーラブルなフォントでは、フォントサイズの絶対単位は、フォントの設定されたサイズと一致します.
文法
アンクルフォントサイズ「絶対サイズ」〈相対サイズ〉> <長さ>>
  • 絶対数:この値は、計算されたフォントサイズを参照します.
  • 相対的なサイズ:それは、フォントサイズ計算されたフォントサイズテーブルに対する値を持っています.
  • lengthパーセンテージ:フォントサイズが絶対であることを指定します.

    • CSSのフォントサイズ


    CSSのフォントサイズを調整するプロパティは、主に選択されたフォントの種類が利用できないときの部分のフォントサイズを変更できるようにすることで、フォントサイズの正直な管理と開発者を提供します.
    このような状況では、フォントのフォールバックが行われ、ブラウザは2番目の指定されたフォントを使用します.これは、使用される最初のフォントと現在のフォントのアスペクト比の違いがあれば大きな問題になるかもしれません.このような状況では、見て、テキストの読みやすさを維持する必要があるところで、CSSフォントサイズ調整プロパティを使用できます.
    フォントサイズは、CSSプロパティの状態を調整し、要素のフォントサイズを大文字のピークの代わりに小文字の高さに基づいて変更する必要があります.
    文法
    フォントサイズを調整します.
  • None :フォントのx高さが保存されていないことを指定する
  • 番号:この値は最初の使用済みフォントのアスペクト番号を参照し、残りの利用可能なフォントは以下の式に従ってスケーリングされます
    • ここで
    を使用するフォントサイズを調整します
    フォントサイズ調整プロパティで指定したアスペクト値
    うん、実際のフォントの
    フォントサイズ値
    例
    15 pxのPROTTO(アスペクト値0.50を持つ)が利用できなくて、次の与えられたフォントがアスペクト値0.40を持っていたなら、使用される代替フォントのフォントサイズは

    どのようにCSSのフォントサイズを調整する作品？


    ここでは、フォントサイズを自動調整するフォントサイズの作品を調整する方法のデモです.以下は異なるアスペクト比を持つ2つの異なるフォントタイプを比較する例です.つのフォントの小文字のX -高さは、他のフォントのx -高さにマッチするために修飾されることができます.

    上記の画像において、左側のテキストには、アスペクト値が0.53のコミックSANSというフォントが付与されている.一方、右側のテキストは、アスペクト値0.47のCalibriフォントで使用されています.これは非常に小さく見えるテキストになります.下側のラインでは、下の手のフォントサイズは、そのアスペクト比に応じて変更されたフォントサイズを持っているため、0.53のフォントサイズの調整が適用されている.

    【出典】W3
    CSSフォントサイズを調整するプロパティの値は、' font size 'の使用される値に影響を及ぼしますが、列挙された値には影響しません.それは、主に利用可能なフォントのExとCHのようなフォントメトリックによってサポートされる相対単位の寸法に影響を及ぼしますが、EM単位のスケールを損傷しません.
    線サイズの数値がフォントサイズの計算されたサイズでチェックして、CSSフォントサイズ調整プロパティは線高さの使用された値を変更しません;むしろ、それは自動的にフォントサイズを調整します.
    CSSでは、しばしばフォントサイズの倍数として'線高さ'を指定します.CSSのフォントサイズを調整するプロパティは、フォントサイズの使用される値に影響を与えるので、著者はCSSフォントサイズの調整が使用されているときに行の高さを設定するようにする必要があります.
    注意:線の高さをあまりに厳重に設定すると、この状況の間、テキストの重なったラインで終わるかもしれません.
    例
    index.html

<!doctype html>
<head>
<title>font-size-adjust Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>Font Without adjustment.</p>
<p class="adjust">Font With adjustment.</p>
<hr>
<p>Previewed on {Browser}.</p>
</body>
</html>

style.css

p {
   font: 20px Verdana, Helvetica, sans-serif;
}
.adjust {
   font-size-adjust: 0.78;
  }

    ブラウザ互換性


    CSS supports in browsersについて話しましょう.現在、FirefoxはデフォルトでCSSフォントサイズを調整します.バージョン43から30まで、ChromeとOperaも、このプロパティをサポートしますchrome://flags.エッジとSafariはすべてのプロパティを調整するCSSのフォントサイズをサポートしていません.
    CSSのフォントサイズを調整するプロパティは最初にCSS 2で導入されたが、後でCSS 2で削除されました.1、再度CSS 3で再導入.
    以下は、この機能をサポートするバージョンと一緒に大きなブラウザを一覧表示するテーブルです.

    Source
    閉じるこの動画はお気に入りから削除されています

    ブラウザの互換性ガイド ブラウザのフォントサイズをチェックする


    LambDataestを使用すると、シームレスにデスクトップとモバイル経由でブラウザ間のフォントサイズをチェックすることができますクロスブラウザの互換性テストを実行します.以下のスクリーンショットでは、NetLifyプラットフォーム上でフォントサイズを調整するプロパティを実装し、別のブラウザにアクセスしようとします.
    Lambdatestダッシュボードへの
  • のログイン.あなたは無料 登録することができます.
  • リアルタイムテストを選択し、目的の設定を最適化します.
    • here
  • CSSのフォントサイズをプレビューする非互換性と互換性のあるブラウザ上で調整します.
  • Google Chrome (非互換性)
  • Firefox (互換性)

    • LambDataestプラットフォームで利用できるリアルタイムテスト機能の助けを借りて、これは、を実行し、CSSのフォントサイズを調整するとの互換性を確認する方法です.ブラウザ全体でCSS互換性を確保するためにできることはたくさんあります.

    クロスブラウザテスト 包みなさい！


    これで、CSSのフォントサイズがどのようなプロパティを調整するのか、なぜ必要か、様々なフォントのアスペクト値を理解する方法についてのアイデアがあるでしょう.
    CSSのフォントサイズは、古いブラウザで優雅に分解するので、移動することができますし、今日の生産ウェブサイトのテキストの読みやすさを高めるために使用を開始することができます.しかし、クロスブラウザの互換性テストを行うことによって見られているように、ブラウザによってサポートされるという厳しい制限があります.これらの状況の間、あなたはサイズ差を避けるために実質的に同一の比率のフォントを選ぶべきです. へのこのガイドも助けるかもしれません.
    私たちはあなたが有益なこの記事を見つけてほしい.あなたが質問をするならば、下記のコメント部でチャイムに自由に感じてください.あなたがこの記事を楽しんだならば、他の人がそれを見つけるのを助けるために、ソーシャルチャンネルでそれを共有してください.もうこれだけです.
    楽しいテスト!!
    blessed動かしてみた
    JavaScriptでのforループの使用の詳細