CSSフォントスタイル

font-styleを使用 CSSプロパティでは、テキストを強調するために、一連の特性を使用してフォントのスタイルを設定できます。

いつものように、Codepenをチェックアウトして、一緒にコーディングできるようにしてください。

フォントスタイル 構文とオプション

font-styleを使用する場合、次のオプションがあります 。これらはすべてキーワードとして指定されていることに注意してください。

font-style: normal;
font-style: italic;
font-style: oblique 30deg;
font-style: oblique;

Font-styleは、いくつかの一般的なグローバルスタイルのキーワードもサポートしています。

/* inherit from parent element */
font-style: inherit;
/* browser's default */
font-style: initial;
/* inherit if parent value, else initial */
font-style: unset;

法線は、指定したfont-family内の通常のフォントに関連しています 。

斜めの場合、オプションで角度（-90〜90）を指定できます。角度が指定されていない場合、デフォルトで14になります。

斜体と斜体は交換可能であることに注意してください 。これは、ブラウザのサポートによるものです。 特別なフォントを使用していて、ブラウザが斜体を検出またはサポートしていない場合は、斜体などを使用します。

obliqueを使用する前に 、obliqueキーワードがブラウザで完全にサポートされているかどうかを確認してください。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

それを念頭に置いて、先に進み、h1タイトルを強調しましょう：

h1.title {
  font-family: 'Tangerine';
  font-style: normal;
}

TangerineフォントをGoogleフォントからインポートした方法に気付くでしょう。このフォントの通常のスタイルは筆記体であるため、そのように表示されます。

この特定のフォントの場合、筆記体にすると傾斜が大きくなるため、適用したくないと思われます。

主な用途 フォントスタイル

ほとんどの場合、normalキーワードの使用は冗長です。したがって、font-styleの主な用途 プロパティは、フォントをイタリックにして強調を追加することです。

段落を強調するために、そのうちの1つを斜体にします。

p.par {
  font-family: 'Indie Flower';
  font-style: italic;
}

Indie Flowerフォントをチェックすると、通常の（通常の）スタイルしかないことがわかります。この場合、ブラウザ自体が傾斜効果を発揮しています！

結論

font-styleを使用する プロパティはfont-familyと深く関連しています 。また、obliqueのブラウザサポートが改善されるまで キーワードの場合、このプロパティの主な用途は、フォントを斜体にすることでフォントを強調することです。