CSS font-size字型
阿新 • • 發佈：2022-01-10
font字型
目標：能夠使用字型和文字相關樣式修改元素外觀樣式
字型大小
屬性名：front-size
取值：數字+px
注意點：谷歌瀏覽器的預設值是16px，單位需要設定，否則是無效的。
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>今天也有努力呦！！！</p>
</body>
字型粗細
屬性名：font-weight
取值：
關鍵字取值：
| 正常 | normal |
|---|---|
| 加粗 | bold |
純數字取值：100~900的整百數
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
注意點：
不是所有字型都提供了9中粗細，因此部分取值頁面中無變化
在實際開發中，以正常，加粗兩種取值使用的最多。
<style> p{ font-weight: bold; } .weight{//複習類選擇器的使用 font-size: 700; } </style> </head> <body> <p>今天也有努力呦！！！</p> <p class="weight">嗯嗯，努力了呀！</p> </body>
字型樣式
屬性名：font-style
取值：
正常(預設值)：normal
傾斜：italic
<style>
#style{ //複習id選擇器的使用
font-style: italic;
}
</style>
</head>
<body>
<p id="style">明天也要加油呦！</p>
</body>
常見的字體系列
1、無襯線字型(sans-serif)
| 特點 | 文字筆畫粗細均勻，並且首位無裝飾 |
|---|---|
| 場景 | 網頁中大多采用無襯線字型 |
| 常見的該系列 | 黑體、Arial |
2、襯線字型
| 特點 | 文字筆畫粗細不均勻，並且首尾有筆鋒裝飾 |
|---|---|
| 場景 | 報刊書籍中 |
| 常見的該系列 | 宋體、The New Roman |
3、等寬字型
| 特點 | 每個字母或者文字的寬度相等 |
|---|---|
| 場景 | 一般用於程式碼編寫，有利於程式碼的閱讀 |
| 常見的該系列 | Consolas、fira code |
字體系列font-family
屬性名：font-family
常見取值：具體字型1，具體字型2，具體字型3......字體系列
渲染規則：從左往右按照順序查詢，如果電腦中未安裝該字型，則顯示下一個字型。如果都不支援，會根據OS，顯示最後字體系列的預設字樣。
注意點：
1、如果字型名稱中存在多個單詞，推薦使用引號包裹
2、最後一項字型不需要使用引號包裹
3、網頁開發時，儘量使用系統自帶常見字型，保證不同使用者瀏覽網頁都可以正確顯示。
樣式的層疊問題
假如給同一個p標籤設定了兩個顏色的屬性，那麼寫在最後的會把前面的覆蓋掉
<style>
p{
color: blue;
color: red;//實際上執行這個紅色
}
</style>
</head>
<body>
<p>明天也要加油呦！</p>
</body>
字型樣式的連寫
屬性名：font
取值：font：style，weight，size，family
順序要求：可以是swsf
省略要求：只能省略前面兩個，如果省略相當於設定了預設值
注意點：
如果需要同時設定單獨和連寫的形式
要麼把單獨的樣式寫在連寫的下面
要麼把單獨的樣式寫在連寫的裡面(否則就相當於給同一個標籤設定了兩個相同屬性。導致上面的被覆蓋掉，所以寫在下面。)
<style>
p{
font: italic 700 300px 楷體，宋體，隸書，sans-serif;
}
</style>
</head>
<body>
<p>明天也要加油呦！</p>
</body>