正文

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

發(fā)布時(shí)間：2023-03-03 16:30:36 稿源：創(chuàng)意嶺閱讀： 902 問(wèn)大家

大家好！今天讓創(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ù)客戶(hù)遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)：175-8598-2043，或添加微信：1454722008

本文目錄:

1、怎么找出電腦里面的字體庫(kù)
2、電腦已經(jīng)安裝了fontawesome4.4.0圖標(biāo)字體元件庫(kù)，原型中怎樣使用
3、word 字體下拉選擇框中這三種不同的字體圖標(biāo)分別代表這是什么字體呢？有什么區(qū)別？
4、如何在HTML中使用圖標(biāo)字體

字體圖標(biāo)庫(kù)（圖標(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畫(huà)布上顯示異常

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

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

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

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

T 或O表示字體類(lèi)型

具體解釋?zhuān)?/p>

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

O是OpenType字體(.OTF) OpenType，是一種可縮放字型（scalable font）電腦字體類(lèi)型，采用PostScript格式，是美國(guó)微軟公司與Adobe公司聯(lián)合開(kāi)發(fā)，用來(lái)替代TrueType字型的新字型。這類(lèi)字體的文件擴(kuò)展名為.otf，類(lèi)型代碼是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è)代稱(chēng)就是切圖，切下來(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)物車(chē)，最后一起存為項(xiàng)目。保存到本地。這樣一套自己需要的字體圖標(biāo)就搞定了。

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

你也可以自己制作字體圖標(biāo)，用AI畫(huà)出后轉(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文件，用自己寫(xiě)的css文件，你只需要在自己的css文件中@font-face引入字體圖標(biāo)文件。像這樣。

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

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

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

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

效果就出來(lái)了

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

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