font Property

Posted on Edited on In Views: Disqus:

 

CSS font 屬性的語法為

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

其實就是font-style、font-variant、font-weight、font-size、line-height、font-family屬性的簡寫，

至於caption、icon、menu、message-box、small-caption、status-bar屬性不比較不常用，

而且我也不知道如何用，所以就先忽略。

 

在使用font簡寫時，其中font-size、font-family兩屬性是必要指定的，缺一不可。

<!DOCTYPE html>
<html>
<head>
    <style>
        p.ex1 {
            font: 15px sans-serif;
        }

        p.ex2 {
            font: italic bold 12px/30px Georgia, serif;
        }
    </style>
</head>
<body>

    <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
    <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>
</html>

 

以下各別列出font底下屬性的用法，當全都了解時，就知道font屬性簡寫的用法了。

 

一、font-style

其有normal(預設值)、italic、oblique

<!DOCTYPE html>
<html>
<head>
    <style>
        p.normal {
            font-style: normal;
        }

        p.italic {
            font-style: italic;
        }

        p.oblique {
            font-style: oblique;
        }
    </style>
</head>
<body>

    <p class="normal">This is a paragraph, normal.</p>
    <p class="italic">This is a paragraph, italic.</p>
    <p class="oblique">This is a paragraph, oblique.</p>

</body>
</html>

結果為

相較之下你會發現italic樣式是斜體，而onlique樣式則是更斜。

 

二、font-variant

其值有normal(預設值)、small-caps

<!DOCTYPE html>
<html>
<head>
    <style>
        p.normal {
            font-variant: normal;
        }

        p.small {
            font-variant: small-caps;
        }
    </style>
</head>
<body>

    <p class="normal">My name is Hege Refsnes.(normal)</p>
    <p class="small">My name is Hege Refsnes.(small-caps)</p>

</body>
</html>

結果為

由此可知，small-caps樣式會將所有小寫的英文字母變大寫，

但須注意變大寫的字母其size並不會變大。

 

三、font-weight

<!DOCTYPE html>
<html>
<head>
    <style>
        p.normal {
            font-weight: normal;
        }

        p.lighter {
            font-weight: lighter;
        }

        p._100 {
            font-weight: 100;
        }

        p.bold {
            font-weight: bold;
        }

        p.bolder {
            font-weight: bolder;
        }

        p._600 {
            font-weight: 600;
        }
    </style>
</head>
<body>

    <p class="normal">This is a paragraph.(normal)</p>
    <p class="lighter">This is a paragraph.(lighter)</p>
    <p class="_100">This is a paragraph.(100)</p>
    <p class="bold">This is a paragraph.(bold)</p>
    <p class="bolder">This is a paragraph.(bolder)</p>
    <p class="_600">This is a paragraph.(600)</p>

</body>
</html>

結果為

在chrome實測結果，normal樣式的字體粗細似乎就等於lighter也等於100~500，

而bold樣式的字體粗細似乎就等於bolder也等於600~900。

 

四、font-size

<!DOCTYPE html>
<html>
<head>
    <style>
        p.large {
            font-size: large;
        }

        p.px {
            font-size: 50px;
        }

        p.percent {
            font-size: 200%;
        }
    </style>
</head>
<body>

    <p>This is a paragraph.</p>
    <p class="large">This is a paragraph.(large)</p>
    <p class="px">This is a paragraph.(px)</p>
    <p class="percent">This is a paragraph.(percent)</p>

</body>
</html>

結果為

字體大小font-size屬性有可套用的數值可選如medium(預設值)、xx-small、x-small、small、large、

x-large、xx-large、smaller、larger。

但我個人認為使用px、%單位會比較可以靈活運用。

 

五、line-height

<!DOCTYPE html>
<html>
<head>
    <style>
        p.three {
            line-height: 3;
        }

        p.px {
            line-height: 20px;
        }

        p.percent {
            line-height: 200%;
        }
    </style>
</head>
<body>

    <p>
        This is a paragraph with a standard line-height.<br>
        This is a paragraph with a standard line-height.<br>
        The default line height in most browsers is about 110% to 120%.<br>
    </p>

    <p class="three">
        This is a paragraph<br>
        This is a paragraph<br>
        This is a paragraph<br>
        This is a paragraph<br>
    </p>

    <p class="px">
        This is a paragraph<br>
        This is a paragraph<br>
        This is a paragraph<br>
        This is a paragraph<br>
    </p>

    <p class="percent">
        This is a paragraph<br>
        This is a paragraph<br>
        This is a paragraph<br>
        This is a paragraph<br>
    </p>

</body>
</html>

結果為

就是指字裡行間的間距，數值可為normal(預設值)、純數字(可有小數點)、px、%。

 

六、font-family

請看font-family文章

 

參考資料：

CSS Fonts @font-face