整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天說了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>效果：
有的網站的主體部分是離不開文字說明的，文字說明可以指引用戶找到想要的信息，如果網站中的文字排版混亂，最終就會使網站失去更多的效果。在今天內容中，小編要與大家分享下文章排版的一些知識。
首先是文字大小的對比，大字體的網站可以給人以強有人的視覺感覺，但缺乏纖細和精致感。而小字體的網站精巧柔和，但力量感不足，如果大小文寧配合使用，可以互相緩解其缺點，并產生生動活潑的對比關系。
其次是文字粗細的對比，字體粗象征強壯、剛勁、沉默，字體細則感覺柔弱、纖細、活潑。在同一廳文字中使用粗細對比效果最為強烈。一般來說，粗字體用于表現豐要的、核心的內容。粗字少細寧多易取得均衡，給人以明快新穎的感覺。
最后是文字的明暗對比，明與暗的文寧造型出現在同一界面中，可以使主題更加醒目和突出，使人感到有距離遠近、時間羌別的空間效果。叫暗對比的友現首先要安排好明暗面積在界面中的比例關系，文字主題與背景及其他寧群間應保持得當的比例，避免干篇一律的單調形式，使界面顯出活躍、生動的氣氛。
不管我們網站屬于什么行業的，只要在最初根據網站設計樣式來確定字體的樣式，合理搭配其它的元素后，就會給網站帶來一個視覺的體驗，效果也會提升不少。
文章出自廊坊網站建設公司，分享轉載地址：http://www.e-wkj.cn/xw/2138.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
