隨著互聯(lián)網(wǎng)的發(fā)展，越來越多以前不懂互聯(lián)網(wǎng)的人也接觸到了互聯(lián)網(wǎng)。我們的客戶對(duì)于互聯(lián)網(wǎng)認(rèn)知以及對(duì)于設(shè)計(jì)的要求是越來越高。設(shè)計(jì)師也是變成花樣來滿足客戶的區(qū)中變態(tài)需求。?

我們經(jīng)常在項(xiàng)目中遇到各種非常個(gè)性化的字體，做前端的朋友都會(huì)知道css3可使用font-face來實(shí)現(xiàn)服務(wù)器端字體。

沒錯(cuò)，一下分享的正是font-face相關(guān)內(nèi)容，不過不是如何使用font-face，而是分享一下轉(zhuǎn)換字體的途徑，具體請(qǐng)看下面內(nèi)容 ?
?

Web字體格式介紹
1、TrueType (.ttf)
　　Windows和Mac系統(tǒng)最常用的字體格式，其最大的特點(diǎn)就是它是由一種數(shù)學(xué)模式來進(jìn)行定義的基于輪廓技術(shù)的字體，這使得它們比基于矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時(shí)，這類字體和矢量字體一樣可以隨意縮放、旋轉(zhuǎn)而不必?fù)?dān)心會(huì)出現(xiàn)鋸齒。

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；?

2、EOT – Embedded Open Type (.eot)
　　嵌入字體格式（EOT）是微軟開發(fā)的一種技術(shù)，允許 OpenType 字體嵌入到網(wǎng)頁并可以下載至瀏覽器渲染，瀏覽器根據(jù) CSS 中 @font-face 的定義，下載，渲染這種 .EOT 后綴的字體文件。這些文件只在當(dāng)前頁活動(dòng)的狀態(tài)下，臨時(shí)安裝在用戶的系統(tǒng)中。
?
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【IE4+】；

3、OpenType (.otf)
　　OpenType是一種可縮放字型（scalable font）電腦字體類型，采用PostScript格式，是美國微軟公司與Adobe公司聯(lián)合開發(fā)，用來替代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年末將其字體庫全部改用OpenType格式。
?
.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

4、WOFF – Web Open Font Format (.woff)
　　相對(duì)于 TrueType 和 OpenType ，WOFF（Web開發(fā)字體格式）是一種專門為了 Web 而設(shè)計(jì)的字體格式標(biāo)準(zhǔn)，它并不復(fù)雜，實(shí)際上只是對(duì)于 TrueType / OpenType 等字體格式的封裝，并針對(duì)網(wǎng)絡(luò)使用加以優(yōu)化：每個(gè)字體文件中含有字體以及針對(duì)字體的元數(shù)據(jù)（Metadata），字體文件被壓縮，以便于網(wǎng)絡(luò)傳輸，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在內(nèi)的幾乎所有主要的字體供應(yīng)商都加入到支持 WOFF 的行列中來
?
.woff字體是Web字體中最佳格式，他是一個(gè)開放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

5、SVG (Scalable Vector Graphics) Fonts (.svg)
　　顧名思義，就是使用SVG技術(shù)來呈現(xiàn)字體，還有一種gzip壓縮格式的SVG字體.svgz。SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個(gè)開放標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。SVG可以使你設(shè)計(jì)的網(wǎng)頁可以更加精彩細(xì)致，使用簡單的文本命令，SVG可實(shí)現(xiàn)色彩線性變化、路徑、自定義字體、透明效果、濾鏡效果等各式常見的圖形圖像效果。

.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

瀏覽器兼容性一覽
使用CSS3的@font-face屬性可以實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體，但是IE只支持微軟自有的EOT格式字體，而其他瀏覽器都不支持這一字體格式，其它瀏覽器可以設(shè)置TTF(TrueType)和OTF(OpenType)兩種字體作為自定義字體，瀏覽器對(duì)@font-face屬性及各種字體格式支持詳?shù)募?xì)情況如下：

注意：
1、以上內(nèi)容收集于網(wǎng)絡(luò)資料
2、現(xiàn)在高級(jí)瀏覽器的最新版本都是可以支持的，上面內(nèi)容主要是給朋友們做個(gè)參考

下面給大家推薦幾個(gè)咱在項(xiàng)目中經(jīng)常使用的字體格式轉(zhuǎn)換工具
Online Font Converter
https://onlinefontconverter.com/

?

Free Font Conve
http://www.freefontconverter.com/

?

The FontSquir-rel Con-verter
http://www.fontsquirrel.com/fontface/generator

fontconverter
http://www.fontconverter.org/

font-face generator
https://everythingfonts.com/font-face

Font 2 Web
http://www.font2web.com/

ttf 2 eot
http://ttf2eot.sebastiankippe.com/

otf 2 woff
http://orionevent.comxa.com/otf2woff.html

字客網(wǎng)
https://www.fontke.com/tool/fontface/
???????

注意：
1、以上工具大多都是親測可用的
2、英文字體在不考慮文字使用版權(quán)的情況下大多數(shù)都是可以直接轉(zhuǎn)換成web字體的，當(dāng)然中文字體只要不是特別大一般也可以的
3、上文都是國外網(wǎng)站，所以可能需要翻墻哦！

另外，再推薦幾個(gè)國內(nèi)的在線字庫 ??

1、有字庫
https://www.youziku.com/
平臺(tái)可以實(shí)現(xiàn)css引用和js引用2中方式，
but，平臺(tái)分為免費(fèi)用戶和收費(fèi)用戶，免費(fèi)用戶是有使用次數(shù)限制的，具體收費(fèi)情況可以自行到官網(wǎng)查詢

2、justfont
http://cn.justfont.com/
類似"有字庫"也提供收費(fèi)方案

3、阿里巴巴
https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index
阿里全段時(shí)間推出了一個(gè)普惠體，可免費(fèi)商用，不失為設(shè)計(jì)師一大福利啊

總結(jié)

以上是生活随笔為你收集整理的font-face使用的web字体格式介绍、浏览器兼容和字体转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。