如何转换生成.ttf.eot.woff.svg@font-face文件【百科全说】

@font-face功能

01

网页上展示最多的内容是什么？文字！纵然使用图片再多的网页，也不会丢掉文字符号。 @font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。

01

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

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

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

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

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

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

01

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

01

上面的这些@font-face转换网站都不支持中文字体的转换，中文字体文件相对于英文显得过于庞大，很长一段时间都被认为是不适合嵌入网页的。直到几年前，这个问题终于被一个日本网站解决了，他用的技术就是截取法，在前端置入一个js脚本，脚本自动根据网页内容适时生成一个小字库（只包含当前网页内容的小字库）然后自动转换成.ttf、.eot、.woff、.svg等格式嵌入网页中，从页实现@font-face效果。体验和英文@font-face差不多，效果非常漂亮。但日文@font-face网站对于中文网页还无法支持。如果是你想在你的网页上使用中文简体@font-face服务，也不是不可能，推荐一个中文@font-face网站——“有字库”。使用时，只需要引用一段js脚本代码或者一段css代码，网站就会自动帮你截取网页需要的小字库并生成.ttf、.eot、.woff、.svg等格式文件，你可以将各文件下载下来，也可以托管在这个网站上，非常方便。去试试吧