1

@font-face功能

网页上展示最多的内容是什么？文字！纵然使用图片再多的网页，也不会丢掉文字符号。

@font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。

@font-face文件

而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

• TrueType（.ttf）

  Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

• EOT– Embedded Open Type (.eot)

  EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

• OpenType(.otf)

  OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

• WOFF–WebOpen Font Format (.woff)

  WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

• WOFF File Format 2.0

  W3C Working Draft 14 April 2015

• SVG(Scalable Vector Graphics) Fonts (.svg)

  SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

@font-face文件转换生成

.eot、.woff、.svg每种格式的文件都可以用专门的工具转换得到，同时也有专门的用于生成@font-face文件的网站，可以将字体文件上传到网站上，转换后下载，然后就可以嵌入到网页上使用了。

几个流行的@font-face文件转换网站：

freefontconverter

http://www.freefontconverter.com/

Online Font Converter - so simple

Convert to TTF, OTF, EOT, WOFF, WOFF 2 and SVG

https://font-converter.net/en

font2web

http://font2web.com/

有字库
专为网页设计师提供在线字体；
海量美观字体、直接引用、无需下载
http://www.youziku.com/

1

xxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxx

@font-face文件 字体文件，icon的替代技术

原文：http://www.cnblogs.com/xgqfrms/p/5003740.html