第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

font 和HTML實現(xiàn)圖標字體的引入：

像font和CSS那樣，設(shè)置@font-face{}，再設(shè)置需要放圖標的元素的class樣式，.imooc{}

然后在HTML中引入圖標：

<ul>

? ?<li><a href=""><i class="imooc">&#xf048</i></a></li>

? ?<li><a href=""><i class="imooc">&#xf049</i></a></li>

? ?<li><a href=""><i class="imooc">&#xf050</i></a></li>

</ul>

其中“f048，f049，f050”算是圖標的編號吧，在下載的圖標字體文件夾的html文件中查看，但是前面要加上“&#x”，否則網(wǎng)頁中只能顯示“f048”字體，而不會顯示圖標

用這種方式引入圖標，可以改變圖標的大小顏色，只需要給圖標所在元素設(shè)置顏色、大小屬性即可：

<li><a href=""><i? class="imooc">&#xf048</i></a></li>

<li><a href=""><i? class="imooc">&#xf048</i></a></li>

這樣就可以改變圖標的顏色、大小了

引入下載的圖標字體：

需要先到imoon.io網(wǎng)站下載需要的圖標，解壓到html所在文件夾，下載的圖標字體文件夾中有一個fonts文件夾，其中有四種字體，需要引入

@font-face{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

font-family:"imooc" ;? ? /*給字體起名*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

src:url("../fonts/imooc.eot");? ? /*IE9兼容*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

src:url("../fonts/imooc.eot?") format("embedded-opentype"),? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

url("../fonts/imooc.woff") format("woff"),? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

url("../fonts/imooc.ttf") format("truetype"),? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

url("../fonts/imooc.svg") format("svg");? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

font-weight:normal;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

font-style:normal;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

?}

在需要引入的地方，將字體類型設(shè)為上面設(shè)置的字體名：

.icon{? /*需要添加圖標元素設(shè)置的class名*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? font-family:"imooc";? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? font-weight:normal;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? font-style:normal;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? -webkit-font-smoothing:antialiased;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

?-moz-osx-font-smoothing:grayscale;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

}

利用before偽類選擇器和content屬性，添加不同樣式，然后可以將這些樣式用在不同的元素上，使他們顯示各個圖標：

.icon-spinner:before{? /*各個圖標樣式名*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ?content:"\e600";? ?/*下載的圖標字體文件夾的html文件上該圖標的算是編號吧*/? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

.icon-heart:before{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? content:"\e601";? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

}

用字體在網(wǎng)頁中畫小圖標：flowerboys.cn

圖標神器IcoMoon網(wǎng)址：https://icomoon.io

sublime創(chuàng)建結(jié)構(gòu)，比如創(chuàng)建一個class名為“sprit”的<ul>,<ul>下有11個<li>,<li>下面是class名為“s-icon”的<s>,<s>標簽有一個兄弟元素<a>，<a>中的文字是“慕課網(wǎng)”

那我們在新建的html中的body里寫：

ul.sprite>li*11>s.s-icon+a{慕課網(wǎng)}，再按“Tab”鍵，就會按要求鍵好結(jié)構(gòu)

結(jié)構(gòu)圖如下：

@font-face格式

矢量圖標網(wǎng)站

字體文件格式：

eot (Embedded OpenType Fonts)：微軟開發(fā)的用于嵌入網(wǎng)頁中的字體，IE專用字體。

ttf (TrueType Fonts)：1980s 由Microsoft和Apple聯(lián)合開發(fā)的一套字體標準，是Mac OS和Win操作系統(tǒng)中最常見的一種字體。

woff (The Web Open Font Format)：web字體中最佳格式，是一個開放的TrueType/OpenType的壓縮版本。2009年被開發(fā)，現(xiàn)被W3C組織推薦標準

svg (SVG Fonts)：用于SVG字體渲染的一種格式，由W3C制定的開放標準的圖形格式。

字體文件格式：

eot (Embedded OpenType Fonts)：微軟開發(fā)的用于嵌入網(wǎng)頁中的字體，IE專用字體。

ttf (TrueType Fonts)：1980s 由聯(lián)合開發(fā)的一套字體標準，是Mac OS和Win操作系統(tǒng)中最常見的一種字體。

woff (The Web Open Font Format)：web字體中最佳格式，是一個開房的TrueType/OpenType的壓縮版本。2009年被開發(fā)，現(xiàn)被W3C組織推薦標準。

svg (SVG Fonts)：用于SVG字體渲染的一種格式，由W3C制定的開放標準的圖形格式。

字體文件格式：

eot (Embedded OpenType Fonts)：微軟開發(fā)的用于嵌入網(wǎng)頁中的字體，IE專用字體。

ttf (TrueType Fonts)：1980s 由Microsoft和Apple聯(lián)合開發(fā)的一套字體標準，是Mac OS和Win操作系統(tǒng)中最常見的一種字體。

woff (The Web Open Font Format)：web字體中最佳格式，是一個開房的TrueType/OpenType的壓縮版本。2009年被開發(fā)，現(xiàn)被W3C組織推薦標準。

svg (SVG Fonts)：用于SVG字體渲染的一種格式，由W3C制定的開放標準的圖形格式。

字體文件格式：

eot (Embedded OpenType Fonts)：微軟開發(fā)的用于嵌入網(wǎng)頁中的字體，IE專用字體。

ttf (TrueType Fonts)：1980s 由Microsoft和Apple聯(lián)合開發(fā)的一套字體標準，是Mac OS和Win操作系統(tǒng)中最常見的一種字體。

woff (The Web Open Font Format)：web字體中最佳格式，是一個開房的TrueType/OpenType的壓縮版本。2009年被開發(fā)，現(xiàn)被W3C組織推薦標準。

svg (SVG Fonts)：用于SVG字體渲染的一種格式，由W3C制定的開放標準的圖形格式。

字體文件格式：

eot (Embedded OpenType Fonts)：微軟開發(fā)的用于嵌入網(wǎng)頁中的字體，IE專用字體。

ttf (TrueType Fonts)：1980s 由Microsoft和Apple聯(lián)合開發(fā)的一套字體標準，是Mac OS和Win操作系統(tǒng)中最常見的一種字體。

woff (The Web Open Font Format)：web字體中最佳格式，是一個開房的TrueType/OpenType的壓縮版本。2009年被開發(fā)，現(xiàn)被W3C組織推薦標準。

svg (SVG Fonts)：用于SVG字體渲染的一種格式，由W3C制定的開放標準的圖形格式。

Icon Fonts的優(yōu)點：

1、靈活性：輕松改變圖標的顏色或其他css效果。

2、可擴展：改變圖標的大小，就像改變字體的大小一樣容易。

3、矢量性：圖標是矢量的，與像素無關(guān)?？s放圖標不會影響清晰度。

4、兼容性：字體圖標支持所有現(xiàn)代瀏覽器（包含糟糕的IE6）。

5、本地使用：通過添加定制字體到您的本地系統(tǒng)，即可在各種不同的設(shè)計和編輯應用程序中使用。

字體文件格式

知識點

特點

難點

CSS Sprite