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 >嗯嗯，努力了呀！</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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413060.html
標籤：Html/Css
上一篇：瀏覽器內核有幾種？