字體圖標(biāo)庫(kù)（圖標(biāo)字體大小）

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于字體圖標(biāo)庫(kù)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、怎么找出電腦里面的字體庫(kù)

• 2、電腦已經(jīng)安裝了fontawesome4.4.0圖標(biāo)字體元件庫(kù)，原型中怎樣使用

• 3、word 字體下拉選擇框中這三種不同的字體圖標(biāo)分別代表這是什么字體呢？有什么區(qū)別？

• 4、如何在HTML中使用圖標(biāo)字體

一、怎么找出電腦里面的字體庫(kù)

找出電腦里面的字體庫(kù)的步驟：

1、雙擊我的電腦圖標(biāo)，打開(kāi)我的電腦文件夾。

2、點(diǎn)擊菜單欄中的文件夾，在左側(cè)點(diǎn)擊控制面板前的加號(hào)選項(xiàng)。

3、點(diǎn)擊字體文件夾，即可看到電腦里的所有字體，這里就是存放所有字體的字體庫(kù)。

二、電腦已經(jīng)安裝了fontawesome4.4.0圖標(biāo)字體元件庫(kù)，原型中怎樣使用

fontawesome4.4.0圖標(biāo)字體元件庫(kù)為什么放到axure8.0畫布上顯示異常

你只需要到： 下載壓縮包然后解壓到你的項(xiàng)目中。

在你的HTML頭部的head里面添加對(duì)相應(yīng)的font-awesome的樣式。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

根據(jù)這里的案例開(kāi)始你的項(xiàng)目。

三、word 字體下拉選擇框中這三種不同的字體圖標(biāo)分別代表這是什么字體呢？有什么區(qū)別？

T 或O表示字體類型

具體解釋：

T是 TTF(TrueTypeFont)是一種字庫(kù)名稱。TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字體文件格式,隨著windows的流行,已經(jīng)變成最常用的一種字體文件表示方式,

O是OpenType字體(.OTF) OpenType，是一種可縮放字型（scalable font）電腦字體類型，采用PostScript格式，是美國(guó)微軟公司與Adobe公司聯(lián)合開(kāi)發(fā)，用來(lái)替代TrueType字型的新字型。這類字體的文件擴(kuò)展名為.otf，類型代碼是OTTO，現(xiàn)行標(biāo)準(zhǔn)為OpenType 1.4。

OpenType最初發(fā)表于1996年，并在2000年之后出現(xiàn)大量字體。它源于微軟公司的 TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技術(shù)。Adobe公司已經(jīng)在2002年末將其字體庫(kù)全部改用OpenType格式。到2005年大概有一萬(wàn)多種OpenType字體，Adobe 產(chǎn)品占了三分之一。

四、如何在HTML中使用圖標(biāo)字體

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

字體圖標(biāo)顧名思義就是可以像字體一樣使用的圖標(biāo)，你可以像定義字體一樣定義它，用font-size給他大小，用color給他顏色，用font-style給他樣式。他就像一個(gè)字體，只不過(guò)他的樣子是圖標(biāo)而已。

就像這樣的圖標(biāo)，他們并不是用圖片，而是就如同一個(gè)字體。

字體圖標(biāo)的好處

前端有一個(gè)代稱就是切圖，切下來(lái)一張張圖，用<img>或者用background來(lái)把圖片呈現(xiàn)出來(lái)。而圖片一個(gè)最大的弊端。占寬帶大，網(wǎng)速不好時(shí)加載慢。一旦放大可能容易失真。沒(méi)法隨意的更改顏色。

而字體圖標(biāo)你可以隨便放大縮小，只需要改變字體大小，而且永遠(yuǎn)不會(huì)失真。你需要在點(diǎn)擊后換一個(gè)顏色，無(wú)需用js那么麻煩。只需要換一下color。是不是很方便？

如何得到字體圖標(biāo)

這里推薦兩個(gè)字體圖庫(kù)，第一個(gè)是iconfont，這個(gè)是我認(rèn)為最好的。你現(xiàn)在網(wǎng)站上挑選自己要的圖標(biāo)，然后加入購(gòu)物車，最后一起存為項(xiàng)目。保存到本地。這樣一套自己需要的字體圖標(biāo)就搞定了。

第二 個(gè)是font-awesome，這一陣套字體庫(kù)。bootstrap用的就是這一套字體庫(kù)。缺點(diǎn)是使用無(wú)法定制。不如iconfont方便。

你也可以自己制作字體圖標(biāo)，用AI畫出后轉(zhuǎn)為SVG格式。這里不多贅述字體圖標(biāo)的制作，因?yàn)楝F(xiàn)成的意見(jiàn)夠我們用了。

如何使用字體圖標(biāo)

通過(guò)iconfont和fontawesome得到的字體圖標(biāo)，會(huì)一個(gè)文件夾內(nèi)包含很多文件。如下圖

你不用管太多，直接引入這些文件中的iconfont.css文件就好。當(dāng)然你也可以不引入css文件，用自己寫的css文件，你只需要在自己的css文件中@font-face引入字體圖標(biāo)文件。像這樣。

然后就可以開(kāi)始使用了，這里演示做一個(gè)火焰的圖標(biāo)。

使用非常簡(jiǎn)單，如果你是引入了iconfont.css文件。你只需要給要加入圖標(biāo)的地方加上類名就好。

在iconfont.css文件中，我們看到我們要引入的火焰圖標(biāo)的類名為icon-huo(這個(gè)名字是自動(dòng)生成的）.

接著我們做一個(gè)span標(biāo)簽，并給他加入iconfont和icon-huo類名。

效果就出來(lái)了

如果你要改變他的大小和，顏色。特別簡(jiǎn)單

直接改變字體大小和顏色。這里為了演示方便直接寫在了html里，規(guī)范應(yīng)該在加入一個(gè)類，寫在css里。

而且一點(diǎn)都沒(méi)失真有沒(méi)有，這樣可以完美適應(yīng)，并且以后做點(diǎn)擊后變色效果，再也不用換背景圖片了。

當(dāng)然你也可以不用iconfont.css文件提供的類名，你可以自己定義類，但是定義類后要這樣寫

注意一定要

1一定要加上font-family:“iconfont”(從iconfont上下載圖標(biāo)字體都叫這個(gè)，fontAwesome上下載的叫fontAwesome；

2，:before或者:after插入一個(gè)元素，設(shè)置content為圖標(biāo)對(duì)應(yīng)的十六進(jìn)制碼。每個(gè)圖標(biāo)對(duì)應(yīng)的十六進(jìn)制碼，可以在iconfont.css文件中看到。

以上就是關(guān)于字體圖標(biāo)庫(kù)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

最好看的手機(jī)字體排行榜（最好看的手機(jī)字體排行榜圖片）

一些封面的字體是怎樣做出來(lái)的（一些封面的字體是怎樣做出來(lái)的視頻）

字體設(shè)計(jì)網(wǎng)站免費(fèi)（字體設(shè)計(jì)網(wǎng)站免費(fèi)版）

杭州室內(nèi)設(shè)計(jì)公司前十名(杭州室內(nèi)設(shè)計(jì)公司前十名排名)

品牌營(yíng)銷前中后期活動(dòng)策劃