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

CSSを使用したフォントスタイリングの実用ガイド

CSSは、フォントのスタイル設定において重要な役割を果たします。 CSSフォントプロパティを使用すると、font-family、font-size、font-weight、font-kerning、およびその他の多くのプロパティを変更できます。 CSSフォントプロパティは、font-style、font-variant、font-weight、font-size / line-height、およびfont-familyの省略形です。さらに、CSS text-shadow、text-stroke、text-fill-color、colorなどを使用したテキスト装飾によってテキストにスタイルを適用できます。

色

このプロパティは、テキストの色を変更するために使用されます。

フォントファミリー

このプロパティは、要素のフォント面を設定するために使用されます。

フォントカーニング

文字間隔を均一にし、読みやすさを向上させるために、フォントカーニングプロパティが使用されます。ただし、このプロパティはフォント固有です。

フォントサイズ

font-sizeプロパティは、フォントのサイズを設定します。

フォントストレッチ

一部のフォントには、凝縮、太字などの追加の面があります。font-stretchプロパティは、これらを指定するために使用されます。

フォントスタイル

テキストを角度でイタリック体にするために、font-styleプロパティが使用されます。

フォントバリアント

font-variantを使用すると、要素をスモールキャップスで表示するかどうかを指定できます。

フォントの太さ

文字の太字は、font-weightプロパティで指定されます。

行の高さ

このプロパティは、2行の間隔を設定します。

テキスト装飾

下線または上線を引いてスタイルを設定するには、テキスト装飾を使用します。

テキストシャドウ

ボックスシャドウと同様に、このプロパティは必要に応じてキャラクターにシャドウを追加します。

さらに、text-indent、text-overflow、white-space、word-break、direction、hyphens、text-orientation、word-wrapなどのテキストレイアウトプロパティがあります。

構文

フォントプロパティの構文は次のとおりです-

Selector {
   font-property: /*value*/
}

例

次の例は、CSSフォントのプロパティ-

を示しています。 
<!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>Demo Heading</h2>
<p>This is demo text</p>
<p>This text is for demo and included here to display different font styles in CSS.</p>
<div>Another text with different font style.</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したフォントスタイリングの実用ガイド

例

<!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>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したフォントスタイリングの実用ガイド


  1. CSSを使用してEmでフォントサイズを設定する

    テキストのスケーラブルなサイズの場合、font-sizeはemで表されます。さようならデフォルトで1つのemは16pxまたは12ptに等しいです。その値は、親要素のフォントサイズを基準にしています。 構文 CSSfont-sizeプロパティの構文は次のとおりです- Selector {    font-size: /*value*/ } 例 次の例は、CSSのfont-sizeプロパティをems-で設定する方法を示しています。 <!DOCTYPE html> <html> <head> <style> div { &nbs

  2. CSSを使用したクロスブラウザの不透明度の設定

    プロパティの不透明度は最新のソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、IE 9以降、およびすべてのバージョンのChromeで機能します。 -moz-opacityプロパティは、0.9より古いFirefoxバージョンの不透明度プロパティです。–khtml-opacityプロパティは、1から始まるサファリバージョン用です。filterプロパティは、不透明度のような効果を与える5〜9のIEブラウザ用です。現代の不透明度のフォールバックとしてこれらすべての値を一緒に使用すると、すべてのブラウザで不透明度を使用できます。 以下は、CSSを使用してクロスブラ