整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天說(shuō)了CSS字體屬性的大小，font-family, 今天我們來(lái)一起學(xué)習(xí)下字體屬性的字體粗細(xì) font-weight
還是使用昨天的那首詩(shī)，讓詩(shī)句中的最后一句顯示粗體，看下效果:
可以看到最后一句顯示粗體了，我們來(lái)查看下對(duì)應(yīng)的代碼:
<!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字體屬性之字體粗細(xì)和樣式</title>
<style>
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<h2>明月幾時(shí)有</h2>
<p>明月幾時(shí)有，把酒問(wèn)青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長(zhǎng)久，千里共嬋娟。</p>
</body>
</html>
字體粗細(xì)中的參數(shù)包括: normal | bold | bolder | lighter | number(自定義)
我們來(lái)試試lighter和number自定義吧
可以看到紅框的字體都已經(jīng)設(shè)置好了，對(duì)應(yīng)的代碼為:
<!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字體屬性之字體粗細(xì)和樣式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
</style>
</head>
<body>
<h2>明月幾時(shí)有</h2>
<p class="lighter">明月幾時(shí)有，把酒問(wèn)青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p class="number">我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長(zhǎng)久，千里共嬋娟。</p>
</body>
</html>
這里需要記住的一點(diǎn)，number自定義數(shù)字后不需要加上px
那么是否可以對(duì)標(biāo)題的字體進(jìn)行粗細(xì)設(shè)置呢？
答案是可以的，一起來(lái)看下
可以看到標(biāo)題中的字體變?yōu)檎５牧耍瑢?duì)應(yīng)的代碼如下:
<!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字體屬性之字體粗細(xì)和樣式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
h2 {
font-weight: normal;
}
</style>
</head>
<body>
<h2>明月幾時(shí)有</h2>
<p class="lighter">明月幾時(shí)有，把酒問(wèn)青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p class="number">我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
<p>人有悲歡離合，月有陰晴圓缺，此事古難全</p>
<p class="bold">但愿人長(zhǎng)久，千里共嬋娟。</p>
</body>
</html>
加上了對(duì)h2的字體設(shè)置
好的，今天就是我們對(duì)字體粗細(xì)的學(xué)習(xí)，大家加油，十一馬上就要結(jié)束了，88
ont 屬性可以用來(lái)作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡(jiǎn)寫(xiě)，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。
font-family寫(xiě)法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級(jí)啟嘉班</p>
</body>效果：
有的網(wǎng)站的主體部分是離不開(kāi)文字說(shuō)明的，文字說(shuō)明可以指引用戶找到想要的信息，如果網(wǎng)站中的文字排版混亂，最終就會(huì)使網(wǎng)站失去更多的效果。在今天內(nèi)容中，小編要與大家分享下文章排版的一些知識(shí)。
首先是文字大小的對(duì)比，大字體的網(wǎng)站可以給人以強(qiáng)有人的視覺(jué)感覺(jué)，但缺乏纖細(xì)和精致感。而小字體的網(wǎng)站精巧柔和，但力量感不足，如果大小文寧配合使用，可以互相緩解其缺點(diǎn)，并產(chǎn)生生動(dòng)活潑的對(duì)比關(guān)系。
其次是文字粗細(xì)的對(duì)比，字體粗象征強(qiáng)壯、剛勁、沉默，字體細(xì)則感覺(jué)柔弱、纖細(xì)、活潑。在同一廳文字中使用粗細(xì)對(duì)比效果最為強(qiáng)烈。一般來(lái)說(shuō)，粗字體用于表現(xiàn)豐要的、核心的內(nèi)容。粗字少細(xì)寧多易取得均衡，給人以明快新穎的感覺(jué)。
最后是文字的明暗對(duì)比，明與暗的文寧造型出現(xiàn)在同一界面中，可以使主題更加醒目和突出，使人感到有距離遠(yuǎn)近、時(shí)間羌別的空間效果。叫暗對(duì)比的友現(xiàn)首先要安排好明暗面積在界面中的比例關(guān)系，文字主題與背景及其他寧群間應(yīng)保持得當(dāng)?shù)谋壤苊飧善宦傻膯握{(diào)形式，使界面顯出活躍、生動(dòng)的氣氛。
不管我們網(wǎng)站屬于什么行業(yè)的，只要在最初根據(jù)網(wǎng)站設(shè)計(jì)樣式來(lái)確定字體的樣式，合理搭配其它的元素后，就會(huì)給網(wǎng)站帶來(lái)一個(gè)視覺(jué)的體驗(yàn)，效果也會(huì)提升不少。
文章出自廊坊網(wǎng)站建設(shè)公司，分享轉(zhuǎn)載地址：http://www.e-wkj.cn/xw/2138.html
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
