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

CSSのフォントバリアント

font-variantプロパティは、font-variant-caps、font-variant-numeric、font-variant-alternates、font-variant-ligatures、およびfont-variant-east-asianを指定するために使用されます。

構文

font-variantプロパティの構文は次のとおりです-

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

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

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
table * {
   box-shadow: inset 0 0 10px lavender;
   font-size: 1.2em;
   font-variant: small-caps;
}
td + td {
   font-variant: all-petite-caps;
}
</style>
</head>
<body>
<table>
<tr>
<th>DEMO a</th>
<th>DEMO b</th>
</tr>
<tr>
<td>1a</td>
<td>1b</td>
</tr>
<tr>
<td>2a</td>
<td>2b</td>
</tr>
</table>
</body>
</html>

出力

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

CSSのフォントバリアント

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   margin: 20px;
   width: 20%;
   float: left;
   box-shadow: inset 0 0 9px orange;
}
#demo {
   font-variant: unicase;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div>
<div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div>
</body>
</html>

出力

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

CSSのフォントバリアント


  1. CSSのフォントスタイル

    CSS font-styleプロパティは、要素のテキストの通常、斜体、または斜体のスタイルを指定するために使用されます。 構文 CSSフォントスタイルプロパティの構文は次のとおりです- Selector {    font-style: /*value*/ } 例 次の例は、CSSフォントスタイルのプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> h2 {    font-style: italic;    background

  2. CSSのフォントサイズ

    CSS font-sizeプロパティは、フォントのサイズを設定するために使用されます。値は、パーセンテージ、ピクセル、cm、ポイント、emなどの単位、および絶対キーワードで指定できます。相対値はアクセシビリティを最大化します。デフォルトのフォントサイズは16pxまたは12ptです。 構文 CSSfont-sizeプロパティの構文は次のとおりです- Selector {    font-size: /*value*/ } 次の例は、CSSのfont-sizeプロパティ-を示しています。 例 <!DOCTYPE html> <html> <he