タイポグラフィヘルパー

テキストのサイズ、太さ、その他のフォントプロパティを変更します

選択できる7つのサイズがあります

各ビューポート幅に対して特定のサイズを選択できます。サイズ修飾子にビューポート幅を追加するだけです。

たとえば、$size-1の修飾子は次のとおりです

クラス	モバイル `768px`まで	タブレット `769px`〜`1023px`	デスクトップ `1024px`〜`1215px`	ワイドスクリーン `1216px`〜`1407px`	フルHD `1408px`以上
`is-size-1-mobile`		変更なし	変更なし	変更なし	変更なし
`is-size-1-touch`			変更なし	変更なし	変更なし
`is-size-1-tablet`	変更なし
`is-size-1-desktop`	変更なし	変更なし
`is-size-1-widescreen`	変更なし	変更なし	変更なし
`is-size-1-fullhd`	変更なし	変更なし	変更なし	変更なし

7つのサイズそれぞれに同じロジックを使用できます。

4つの配置ヘルパーのいずれかを使用してテキストを配置できます

各ビューポート幅でテキストを異なる配置にできます。配置修飾子にビューポート幅を追加するだけです。

たとえば、has-text-leftの修飾子は次のとおりです

クラス	モバイル `768px`まで	タブレット `769px`〜`1023px`	デスクトップ `1024px`〜`1215px`	ワイドスクリーン `1216px`〜`1407px`	フルHD `1408px`以上
`has-text-left-mobile`	左揃え	変更なし	変更なし	変更なし	変更なし
`has-text-left-touch`	左揃え	左揃え	変更なし	変更なし	変更なし
`has-text-left-tablet-only`	変更なし	左揃え	変更なし	変更なし	変更なし
`has-text-left-tablet`	変更なし	左揃え	左揃え	左揃え	左揃え
`has-text-left-desktop-only`	変更なし	変更なし	左揃え	変更なし	変更なし
`has-text-left-desktop`	変更なし	変更なし	左揃え	左揃え	左揃え
`has-text-left-widescreen-only`	変更なし	変更なし	変更なし	左揃え	変更なし
`has-text-left-widescreen`	変更なし	変更なし	変更なし	左揃え	左揃え
`has-text-left-fullhd`	変更なし	変更なし	変更なし	変更なし	左揃え

4つの配置それぞれに同じロジックを使用できます。

4つのテキスト変換ヘルパーのいずれかを使用してテキストを変換できます

5つのテキストの太さヘルパーのいずれかを使用してテキストの太さを変換できます

5つのフォントファミリーヘルパーのいずれかを使用してフォントファミリーを変更できます

クラス	ファミリー
`is-family-sans-serif`	フォントファミリーを`$family-sans-serif`に設定します
`is-family-monospace`	フォントファミリーを`$family-monospace`に設定します
`is-family-primary`	フォントファミリーを`$family-primary`に設定します
`is-family-secondary`	フォントファミリーを`$family-secondary`に設定します
`is-family-code`	フォントファミリーを`$family-code`に設定します