CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSによるフォントスタイリング入門！fontプロパティの使い方と実例

CSSフォントスタイリングの基本

CSSはフォントスタイリングにおいて重要な役割を担っています。font-family（書体）、font-size（サイズ）、font-weight（太さ）、font-kerning（カーニング）など、多数のプロパティを通じて文字の見た目を細かく制御できます。

font プロパティは、font-style、font-variant、font-weight、font-size/line-height、font-family をまとめて指定できるショートハンド（省略記法）です。さらに、text-decoration のほか、text-shadow、text-stroke、text-fill-color、color などを併用することで、テキストに多彩な装飾効果を加えることも可能です。

主なフォント・テキスト関連プロパティ一覧

color

テキストの色を変更するためのプロパティです。

font-family

要素に適用する書体（フォントフェイス）を設定します。

font-kerning

文字間隔を均一にし、可読性を高めるために使用します。ただし、このプロパティの効果はフォントによって異なる点に注意してください。

font-size

フォントのサイズを指定します。

font-stretch

一部のフォントには「condensed（幅狭）」や「bold」などの追加フェイスが用意されています。font-stretch プロパティは、それらを明示的に指定したい場合に使います。

font-style

テキストを傾けて斜体（イタリック）表示するためのプロパティです。

font-variant

要素をスモールキャップス（小型大文字）で表示するかどうかを指定できます。

font-weight

文字の太さ（ボールド具合）を指定します。

line-height

行と行の間隔（行間）を設定します。

text-decoration

下線・上線・取り消し線などの装飾とそのスタイルを指定します。

text-shadow

box-shadow と同じ考え方で、文字に影を追加できるプロパティです。

このほかにも、text-indent、text-overflow、white-space、word-break、direction、hyphens、text-orientation、word-wrap といったテキストレイアウト系のプロパティが用意されています。

構文（シンタックス）

font プロパティの基本的な構文は以下のとおりです。

セレクタ {
    font-property: /* 値 */
}

実装例1

以下の例では、CSSの font プロパティと text-shadow を組み合わせています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    font: 1.6em arial;
    text-shadow: -3px -12px lightblue;
}
p + p {
    font: italic bold 12px/30px menu;
    text-shadow: unset;
    box-shadow: 0 0 5px 1px black;
}
div {
    width: 30%;
    font-size: 1.4em;
    font-family: cursive;
    background-color: tomato;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<p>これはデモ用テキストです</p>
<p>このテキストはデモ用のもので、CSSのさまざまなフォントスタイルを表示するために記述しています。</p>
<div>異なるフォントスタイルを適用したテキストです。</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSによるフォントスタイリング入門！fontプロパティの使い方と実例

実装例2

続いて、oblique（斜体の角度指定）や small-caps を含む font ショートハンドの例です。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    font: oblique 5deg small-caps bold 1.3em/0.5px cursive;
    border: 3px solid lightcyan;
}
</style>
</head>
<body>
<p>これはデモ用テキストです</p>
<p>こちらも別のデモ用テキストです</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSによるフォントスタイリング入門！fontプロパティの使い方と実例

  1. CSSのem単位でフォントサイズを設定する方法

    テキストを拡大縮小可能なサイズにしたい場合は、font-sizeプロパティをem単位で指定します。デフォルトでは1emは16px（または12pt）に相当し、その値は親要素のフォントサイズを基準とした相対値になります。この特性により、ページ全体の文字サイズを柔軟かつ一貫性のある形で管理できます。 構文 CSSのfont-sizeプロパティの基本構文は以下のとおりです。 Selector {    font-size: /*値*/ } 例1：divとspanでのem指定 次の例では、font-sizeプロパティをem単位で設定する方法を示しています。 <!DOCTYPE

  2. CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法

    Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit