整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天說了CSS字體屬性的大小，font-family, 今天我們來一起學習下字體屬性的字體粗細 font-weight
還是使用昨天的那首詩，讓詩句中的最后一句顯示粗體，看下效果:
可以看到最后一句顯示粗體了，我們來查看下對應的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體粗細和樣式</title>
<style>
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長久，千里共嬋娟。</p>
</body>
</html>
字體粗細中的參數包括: normal | bold | bolder | lighter | number(自定義)
我們來試試lighter和number自定義吧
可以看到紅框的字體都已經設置好了，對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體粗細和樣式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p class="lighter">明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p class="number">我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長久，千里共嬋娟。</p>
</body>
</html>
這里需要記住的一點，number自定義數字后不需要加上px
那么是否可以對標題的字體進行粗細設置呢？
答案是可以的，一起來看下
可以看到標題中的字體變為正常的了，對應的代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體粗細和樣式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
h2 {
font-weight: normal;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p class="lighter">明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p class="number">我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長久，千里共嬋娟。</p>
</body>
</html>
加上了對h2的字體設置
好的，今天就是我們對字體粗細的學習，大家加油，十一馬上就要結束了，88
ont 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫，或將元素的字體設置為系統字體。
font-family寫法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級啟嘉班</p>
</body>效果：
家好，我是大澈！
本文約 800+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優質代碼片段。
今天分享一段優質 CSS 代碼片段，實現 CSS 文字鏤空的效果。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文字鏤空</title>
<style>
div {
margin: 10% auto;
font-size: 60px;
font-weight: bold;
text-align: center;
/*字體粗細*/
-webkit-text-stroke: 1px red;
/*描邊*/
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>文字鏤空</div>
</body>
</html> 分享原因
這段代碼展示了如何使用 CSS 為文本添加描邊效果和透明填充顏色，從而實現有趣的文字鏤空視覺效果。
它展示了現代 CSS 特性的使用，讓我們使用幾行代碼，就可以輕松實現較復雜的樣式效果。
在項目中確實可能會用到，到時候直接來CV即可。
我越來越覺得，CSS真的是 yyds ！
代碼解析
1. margin: 10% auto;
將元素的上下邊距設置為父元素高度的10%，左右邊距自動，這樣可以將元素在水平方向居中，在垂直方向看著也比較舒服。
2. -webkit-text-stroke: 1px red;
為文本添加1像素寬的紅色描邊。
-webkit-text-stroke 是一個非標準的 CSS 屬性，用于在 WebKit 內核瀏覽器中為文本添加描邊效果。
它由兩個部分組成：描邊的寬度和描邊的顏色。這個屬性可以創建一些特別的視覺效果，如在黑色背景上用白色描邊的文字等。
這是一個 WebKit 特性，所以帶有 -webkit- 前綴。此屬性在支持 WebKit 內核的瀏覽器中有效，例如 Chrome 和 Safari。
3. -webkit-text-fill-color: transparent;
將文本的填充顏色設置為透明。
-webkit-text-fill-color 也是一個非標準的 CSS 屬性，用于在 WebKit 內核瀏覽器中設置文本的填充顏色。
這個屬性與標準的 color 屬性類似，但它的設計目的是與 -webkit-text-stroke 一起使用，以提供更高級的文本樣式。
這同樣是一個 WebKit 特性。
- end -
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
