初識(shí)CSS-字體圖標(biāo)

大有學(xué)問# #頭條創(chuàng)作挑戰(zhàn)賽#

什么是字體圖標(biāo)？

在html代碼中是以文字元素的形式出現(xiàn)，但在網(wǎng)頁渲染時(shí)卻以圖片的形式顯示的小圖標(biāo)就叫做字體圖標(biāo)。

常見形式：地址、電話、登錄窗口的頭像等。

字體圖標(biāo)與精靈圖對(duì)比

字體圖標(biāo)比精靈圖更為輕量化，在網(wǎng)頁中加載速度更快；

精靈圖在實(shí)際使用中，圖片放大或縮小時(shí)圖片會(huì)失真。

精靈圖是一張多個(gè)圖標(biāo)整合的一個(gè)大圖片，后續(xù)添加或修改圖標(biāo)不方便。

注：

雖然字體圖標(biāo)好處多多，但是它并不能替代精靈圖。

當(dāng)小圖標(biāo)形式簡(jiǎn)單且個(gè)數(shù)較少時(shí)適合使用字體圖標(biāo)；

當(dāng)小圖標(biāo)形式復(fù)雜且個(gè)數(shù)較多時(shí)適合使用精靈圖。

字體圖標(biāo)哪里來？

icomoon網(wǎng)站：https://icomoon.io/。

阿里iconfont字庫：https://www.iconfont.cn/。

字體圖標(biāo)使用方法

以icomoon網(wǎng)站為例。

從網(wǎng)站中下載圖標(biāo)壓縮包：點(diǎn)擊右上角“IcoMoon App”按鈕，進(jìn)入字體圖標(biāo)選擇頁面。

icomoon網(wǎng)站首頁

選中需要的圖標(biāo)（選中狀態(tài)的圖標(biāo)，背景顏色會(huì)變白且出現(xiàn)黃色邊框）后，個(gè)數(shù)可以選擇1個(gè)，也可以選擇多個(gè)。選好圖標(biāo)后，點(diǎn)擊右下角“Generate Font ”按鈕進(jìn)入下載頁面。

字體圖標(biāo)選擇頁面

點(diǎn)擊右下角“download”按鈕進(jìn)行下載。

icomoon網(wǎng)站圖標(biāo)下載頁面

解壓下載好的壓縮包。

字體圖標(biāo)下載文件解壓后的文件夾

將解壓好的文件夾整體添加到項(xiàng)目文件夾中，我沒有單獨(dú)設(shè)置字體文件夾，直接放在素材圖片文件夾了。

項(xiàng)目文件夾目錄

打開字體圖標(biāo)文件夾中style.css，

復(fù)制字體聲明到html文件的style樣式中，改變url的圖標(biāo)文件存放位置。

span標(biāo)簽中字體樣式需要與字體聲明中樣式保持一致。

字體圖標(biāo)調(diào)用

在html文件中，span標(biāo)簽的內(nèi)容是需要從網(wǎng)站中直接粘貼復(fù)制過來使用。在網(wǎng)站下載頁面，鼠標(biāo)點(diǎn)擊就是選中狀態(tài)，直接ctrl+c復(fù)制即可。

字體圖標(biāo)的代碼樣式調(diào)用

如此就是完整的字體圖標(biāo)使用過程。另外有阿里iconfont也可以使用，也是免費(fèi)的。有興趣可自行了解。

字體圖標(biāo)代碼示例

<style>
  /* 字體聲明 ：從下載字體圖標(biāo)的文件夾中style.css文件上復(fù)制過來的*/
  @font-face {
    font-family: 'icomoon';
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu');
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
          url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
          url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
          url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    font-family: 'icomoon';
    font-size: 100px;
    color: antiquewhite;
  }
</style>

span標(biāo)簽的內(nèi)容就是從字體圖標(biāo)上粘貼下來的

代碼運(yùn)行效果圖

好了，今天的學(xué)習(xí)就到這里了，下回學(xué)習(xí)CSS三角~

天說了CSS字體屬性的大小，font-family, 今天我們來一起學(xué)習(xí)下字體屬性的字體粗細(xì) font-weight

還是使用昨天的那首詩，讓詩句中的最后一句顯示粗體，看下效果:

可以看到最后一句顯示粗體了，我們來查看下對(duì)應(yīng)的代碼:

<!DOCTYPE html>

<head>

<title>CSS字體屬性之字體粗細(xì)和樣式</title>

<style>

.bold {

font-weight:bold;

}

</style>

</head>

<body>

<p>明月幾時(shí)有，把酒問青天</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(自定義)

我們來試試lighter和number自定義吧

可以看到紅框的字體都已經(jīng)設(shè)置好了，對(duì)應(yīng)的代碼為:

<!DOCTYPE html>

<head>

<title>CSS字體屬性之字體粗細(xì)和樣式</title>

<style>

.bold {

font-weight:bold;

}

.lighter {

font-weight:lighter;

}

.number {

font-weight: 900;

}

</style>

</head>

<body>

<p class="lighter">明月幾時(shí)有，把酒問青天</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è)置呢？

答案是可以的，一起來看下

可以看到標(biāo)題中的字體變?yōu)檎５牧耍瑢?duì)應(yīng)的代碼如下:

<!DOCTYPE html>

<head>

<title>CSS字體屬性之字體粗細(xì)和樣式</title>

<style>

.bold {

font-weight:bold;

}

.lighter {

font-weight:lighter;

}

.number {

font-weight: 900;

}

h2 {

font-weight: normal;

}

</style>

</head>

<body>

<p class="lighter">明月幾時(shí)有，把酒問青天</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

午說了CSS字體的顏色屬性，下午來說下字體的文本對(duì)齊text-align和文本裝飾text-decoration

text-align屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對(duì)齊方式。語法規(guī)則如下:

div {

text-align:center;

}

除了有center屬性外，還有另外兩個(gè)屬性:

left 左對(duì)齊(默認(rèn)值)

right 右對(duì)齊

先看下居中效果:

對(duì)應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: center;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個(gè)是央企，一個(gè)是巨頭</div>

</body>

</html>

然后是文案左對(duì)齊，看下效果:

對(duì)應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: left;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個(gè)是央企，一個(gè)是巨頭</div>

</body>

</html>

最后是右對(duì)齊，看下效果:

對(duì)應(yīng)的代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: right;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個(gè)是央企，一個(gè)是巨頭</div>

</body>

</html>

如果不寫文字對(duì)齊的屬性，看下默認(rèn)應(yīng)該都是左對(duì)齊，效果如下:

對(duì)應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* div {

text-align: right;

} */

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個(gè)是央企，一個(gè)是巨頭</div>

</body>

</html>

可以看到已經(jīng)將text-align代碼注釋掉了，默認(rèn)展示就是左對(duì)齊

今天先到這里，大家學(xué)習(xí)工作辛苦了~

在線咨詢

上一篇：詳細(xì)解析html字體屬性
下一篇：前端 - HTML基礎(chǔ)（2）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

初識(shí)CSS-字體圖標(biāo)

什么是字體圖標(biāo)？

字體圖標(biāo)與精靈圖對(duì)比

字體圖標(biāo)哪里來？

字體圖標(biāo)使用方法

字體圖標(biāo)代碼示例

您的項(xiàng)目需求