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

CSSのフォントプロパティ

CSSフォントのプロパティを使用すると、テキストの外観を変更できます。次のプロパティは、テキストのスタイル設定に役立ちます。

フォントファミリー

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

フォントカーニング

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

フォントサイズ

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

フォントストレッチ

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

フォントスタイル

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

フォントバリアント

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

フォントの太さ

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

上記のすべてのプロパティの省略形であるfontプロパティを使用することもできます。

構文

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

Selector {
   font: /*value*/
}

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

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3px;
   float: left;
   font-family: "Matura MT Script Capitals";
   font-size: 200%;
}
#a {
   font-style: normal;
}
#b {
   font-style: italic;
}
#c {
   font-style: oblique 40deg;
   font-family: "Harlow Solid Italic";
}
</style>
</head>
<body>
<div id="a">Normal Demo</div>
<div id="b">Italic Demo</div>
<div id="c">Oblique Demo</div>
</body>
</html>

出力

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

CSSのフォントプロパティ

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   font-size: 1.1em;
   list-style: circle;
}
li:first-child {
   background-color: seashell;
   font-family: cursive;
}
li:nth-child(2) {
   background-color: azure;
   font-family: "Brush Script Std", serif;
}
li:last-child {
   background-color: springgreen;
   font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>Learning Scala</h2>
<ul>
<li>Scala is a pure object-oriented language in the sense that every value is an object.</li>
<li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li>
<li>Scala provides a lightweight syntax for defining anonymous functions</li>
</ul>
</body>
</html>

出力

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

CSSのフォントプロパティ


  1. CSSunicode-bidiプロパティ

    Unicode-bidiプロパティを使用して、CSSで複数の言語をサポートするためにテキストをオーバーライドするかどうかを設定します 例 <!DOCTYPE html> <html>    <head>       <style>          p.demo1 {             direction: rtl;          

  2. CSSフォントプロパティでアニメーションを実行する

    フォントにアニメーションを実装するには CSSでプロパティを使用すると、次のコードを実行できます。 例 <!DOCTYPE html> <html>    <head>       <style>          p {             border: 2px solid black;             width