Day 17 CSS字型屬性

2024 iThome 鐵人賽

DAY 17

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 17 篇

16th鐵人賽

zhiz

2024-09-21 22:39:50

88 瀏覽

分享至

今天要介紹CSS字型屬性

在前兩天的CSS語法實作範例中，運用到更改字型、字體大小等屬性，今天將更深入學習這個部分～

font-family設定字型，若含有多個字型就用逗號隔開，當使用者瀏覽器上沒有第一個寫入的字型，便會顯示第二個寫入的字型。
font-size設定字體大小(cm 或px)。
font-style 設定斜體字型，寫入italic或oblique。
font-weight 設定字型的粗細，寫入數字(100～900)或文字。
font-variant 設定字型變化，寫入small-caps，小寫英文字會轉變為尺寸偏小的大寫藝術字。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小寫轉大寫</title>
    <style> 
        p{font-variant: small-caps;}
        
    </style>
</head>
<body>
    <p>She is a pretty girl.</p>
    
</body>
</html>

前面介紹許多字型屬性，若不想逐一設定，可以利用下面這個方式來快速設定基本的字型屬性～

font 功用是不用逐一設定字型的屬性，不同屬性值用空格隔開。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字型屬性</title>
    <style>
        .chinese{ font: 30px "標楷體"; }
        .english{ font: 30px "Arial"; }
    </style>
</head>
<body>
    <p class="chinese">我是一個女孩</p>
    <p class="english">I am a girl.</p>
</body>
</html>