流動的なタイポグラフィクランプ
2つのビューポート幅の間で、CSS の線形フォントスケールを生成します。
入力値
CSS クランプ式
生成されたCSSは開始値です。適切な場合は相対テキスト単位を使用し、ズーム、テキストの拡大縮小、オーバーフローをテストしてください。
シナリオ比較
このタブには最大3つのスナップショットを保存できます。1つ読み込むと現在の入力が置き換えられます。
計算式
m = 100(f₁−f₀)/(v₁−v₀)とb = f₀−mv₀/100を使用してください。流体サイズはclamp(f₀, b + m×vw, f₁)、フォントサイズはf、ビューポート幅はvで表されます。
2つのビューポート幅の間で、CSS の線形フォントスケールを生成します。
実例
- 最小フォントサイズ (px)
- 16
- 最大フォントサイズ (px)
- 24
- 最小ビューポート幅 (px)
- 400
- 最大ビューポート幅 (px)
- 1200
- CSS クランプ式
- clamp(16px, calc(12px + 1vw), 24px)
- ビューポート係数
- 1 vw
- ピクセルインターセプト
- 12 px
適用範囲と制限
生成されたCSSは開始値です。適切な場合は相対テキスト単位を使用し、ズーム、テキストの拡大縮小、オーバーフローをテストしてください。
入力値は欠損値と許容範囲についてチェックされます。有限の数値範囲外の結果は表示されません。丸め処理は表示に影響しますが、計算にはモデルの数値精度が使用されます。
結果に依拠する前に、単位と前提条件を確認してください。ラベルを変更しても、通貨単位や物理単位は変換されません。
数式バージョン: 174bffea8b3a · 例を確認済み: