CSSの1行でフルテキストスタイリング

5635 ワード

tutorial webdev css テキストリンク

私は常にフォントの速さはあまりにも混乱を使用して考えた唯一の1つですか?
さて、私はついにそれを使い始めることに決めました.
今私はあなたと私が学んだことを共有したい.すべての風変わりな、gotchasとユースケース.

It's a very useful tool, if you're willing to play by its rules.

何をしますか。

フォントショートカットでは、ほとんどすべてのフォント関連のプロパティをCSSの1行で設定できます.
を含む

font-style

font-variant

font-weight

font-size

line-height

font-family

font-stretch - この1つは頻繁に使用されず、この記事では議論されません

必須プロパティー

これらのうちだけfont-size and font-family が必要です.どちらかを省略すると、行全体が無視されます.その他のすべてのプロパティは省略することができます.

Be careful though.

If you don't specify a property, it will be reset to its default value. Even if you've defined that property earlier. Including in a parent element.

font-kerning and font-size-adjust will also be reset by this shorthand, even though they can't be set by it.

財産権

プロパティの順序によって柔軟性がありますが、いくつかの規則があります.

スタイル、バリアント&

font-style , font-variant , and font-weight 前に来なければならないfont-size . 彼らの個々の命令は、重要でありません.

これらのプロパティが何をしているかを覚えていない場合は、以下のような簡単なリマインダーです.

font-style - を選択することができますnormal , italic , and oblique フォントのスタイル.斜体は基本的にイタリック体と同じですが、普通のフォントと同じグリフを使用します.

font-variant - を選択することができますnormal , and small-caps フォントのバリアント.

font-weight - あなたがフォントの厚さ(重量)を選択することができます.のようなキーワードを使用するnormal , bold , lighter , bolder または100から900までの数値.

フォントファミリ

font-family 常に最後になければなりません.

それはkeyword またはフォント名.フォント名が空白を含む場合、引用符で括らなければなりません.
コンマで区切られた追加のフォールバックフォントも指定できます.好みのフォントが使用できない場合は、(左から右へ)使用されます.

/* keyword */
font: 15px serif;
/* font name */
font: 15px "Playfair Display";
/* font name with keyword fallback */
font: 15px "Playfair Display", serif;
/* font name with 2 fallbacks: font name and keyword */
font: 15px "Playfair Display", Merriweather, serif;

フォントサイズと線

font-size and line-height 右は真ん中です.アフターfont-style , font-variant , and font-weight . 前にfont-family .line-height 直後に来なければならないfont-size , スラッシュで区切られる/ ). あなたが指定しないならばline-height , スラッシュも省略する必要があります.