CSS でフォントの境界線を設定する

1. -webkit-text-stroke プロパティを使用して、CSS のフォントに境界線を適用する
2. text-shadow プロパティを使用して、CSS のフォントに境界線を適用する

このチュートリアルでは、CSS のフォントに境界線と色を適用する方法を紹介します。

-webkit-text-stroke プロパティを使用して、CSS のフォントに境界線を適用する

テキストの text-stroke プロパティを使用して、CSS のフォントに境界線を適用できます。この機能を使用するには、text-stroke プロパティの前に webkit プレフィックスを使用する必要があります。ただし、Safari や Chrome などの web-kit ベースのブラウザでのみ機能します。text-stroke プロパティを使用すると、AdobeIllustrator などのベクター描画アプリケーションでテキストを装飾できます。このプロパティは、他の 2つのプロパティ、text-stroke-width と text-stroke-color の省略形です。したがって、text-stroke プロパティを使用して、テキストの境界線の幅と色を定義できます。

たとえば、HTML の h1 タグ内にテキストを記述します。CSS で、h1 タグを選択し、-webkit-text-stroke プロパティを適用します。幅を 1px に設定し、色を赤に設定します。次に、font-family プロパティを使用してフォントを arial に設定し、green の色を付けます。

以下の例では、赤い色の境界線を持つ緑色のテキストが表示されます。これは、異なる色のフォントで境界線を設定する方法です。

サンプルコード：

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

text-shadow プロパティを使用して、CSS のフォントに境界線を適用する

text-shadow プロパティを使用して text-stroke プロパティをエミュレートし、CSS のフォントに境界線を適用できます。text-shadow プロパティは、テキストに影を付けるために使用されます。最初の 2つの値は、h-shadow および v-shadow プロパティを示します。それらは、水平および垂直の影の位置を示します。text-shadow プロパティの 3 番目の値として blur-radius 値を設定できます。指定された位置から指定された半径で影をぼかします。影の色を指定して、text-shadow プロパティの 4 番目の値にすることができます。この方法はほとんどのブラウザで機能します。

たとえば、HTML の h1 タグ内にテキストを記述します。CSS で、h1 タグを選択し、プロパティ text-shadow を記述します。h-shadow プロパティと v-shadow プロパティの両方に値 0 を指定します。blur-radius に 2px と書き、red の色を付けます。

以下の例の text-shadow プロパティを使用して、フォントの境界線機能をエミュレートしました。影に色を付けるときに影が境界線のように見えるように、水平半径と垂直半径に値 0 を設定します。

サンプルコード：

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}