CSSフォント属性

5220 ワード

フォント名プロパティ(font-family)
このプロパティは、Arial、Tahoma、Courierなどのフォント名を設定します.例文は以下の通りです.
.s1 {
font-family:Arial}
<HTML>
     <HEAD>
     <TITLE>CSS    </TITLE>
        <Style Type="text/css">
         <!--
        H1{ 
             font-family: "  "
         }
         .text { 
           font-family: "  ,  _gb2312";
         }
        -->
         </Style>
     </HEAD>
     <BODY>
     <H1>         </H1>
     <p class="text">  ,             ,                       ,                   。 Macromedia            Dreamweaver、Flash、Fireworks              ,     MX          ,           ,                 。</P>
     </BODY>
 </HTML>

ファイルの説明:
H 1マークスタイルを設定し、フォントを隷書と規定し、classをtextとするカスタムスタイルを設定し、フォントを宋体または宋を模倣することを規定した.すなわち、クライアントに第1種がない場合
宋体フォントの場合、ブラウザでは2種類目の宋体フォントを使って表示されます.
スタイルを定義すると、16行目の見出し語にはH 1スタイルが自動的に適用され、

ラベルにはclassプロパティでtextスタイルが参照されます.
フォントサイズ属性(font-size)
このプロパティはフォントのサイズを設定できます.フォントサイズの設定には様々な方法があり、最もよく使われるのはptとpx(pixel)です.例文は以下の通りです.
.s2 {
font-size:16pt}

<HTML>
    <HEAD>
        <TITLE>CSS    </TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                font-size:14pt
            }
            .text { 
                font-size:9pt
            }
        -->
        </Style>
    </HEAD>
    <BODY>
    <H1>         </H1>
    <p class="text">  ,             ,                       ,                   。 Macromedia            Dreamweaver、Flash、Fireworks              ,     MX          ,           ,                 。</P>
    </BODY>
</HTML>

フォントスタイルプロパティ(font-style)
このプロパティには、normal、italic、obliqueの3つの値があります.normalはデフォルト値で、italic、obliqueは斜体表示です.例文は以下の通りです.
.s1 {
font-sytle:italic}
<HTML>
    <HEAD>
        <TITLE>CSS    </TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                font-style:italic
            }
            .text { 
                font-style:oblique
            }
            -->
        </Style>
    </HEAD>
    <BODY>
    <H1>         </H1>
    <p class="text">  ,             ,                       ,                   。 Macromedia            Dreamweaver、Flash、Fireworks              ,     MX          ,           ,                 。</P>
    </BODY>
</HTML>

フォントの濃淡プロパティ(font-weight)
このプロパティの一般的な値はnormalとboldで、normalはデフォルトです.例文は以下の通りです.

このテキストフォントの濃淡属性(font-weight)値はboldです.

<HTML>
    <HEAD>
    <TITLE>CSS    </TITLE>
        <Style Type="text/css">
        <!--
            H1{ 
                font-weight:900
            }
            .text { 
                font-weight:bolder
            }
        -->
        </Style>
    </HEAD>
    <BODY>
    <H1>         </H1>
    <p class=text>  ,             ,                       ,                   。 Macromedia            Dreamweaver、Flash、Fireworks              ,     MX          ,           ,                 。</P>
    </BODY>
</HTML>

フォント変数プロパティ(font-variant)
このプロパティには2つの値があり、normalとsmall-caps、normalはデフォルトです.small-capsは小さな大文字(小さいサイズの大文字)を表します.例文は以下の通りです.
 .s1 {
font-variant:small-caps}
<html>
<head>
<title>       font-variant</title>
<STYLE>
.s1 {font-variant:small-caps}
</STYLE>
</head>
<body>
<p>    (font-variant)      ,      normal,     small-caps。             (font-variant) small-caps。</p>

<p class = "s1">The font-variant value of the text is "small-caps". </p>
</body>
</html>

フォントプロパティ(font)
このプロパティは、さまざまなフォントプロパティの迅速な総合的な書き方です.このプロパティは、フォントスタイルプロパティ(font-style)、フォント変数プロパティ(font-variant)、フォント濃淡プロパティ(font-weight)、フォントサイズプロパティ(font-size)などのプロパティを統合できます.例文は以下の通りです.
fontプロパティではline-height値をfont-size値と略し、スラッシュで/を区切ります.
.s1 {
font:italic normal bold 11pt arial}
<html>
<head>
<title>     font</title>
<STYLE>
.s1 {font:italic normal bold 11pt Arial}
.s2 {font:normal small-caps normal 14pt Courier}
</STYLE>
</head>
<body>
<p class = "s1">         (font-style)    italic,    (font-variant)    normal,    (font-weight)    bold,    (font-size)    11pt,    (font-family)    Arial。</p>

<p class = "s2">         (font-style)    normal,    (font-variant)    small-caps,    (font-weight)    normal,    (font-size)    14pt,    (font-family)    Courier。</p>
</body>
</html>

フォントカラー(color)
フォント色はCSSのcolor属性で表します.
原文:http://home.51.com/myloveforyou217/diary/item/10034794.html