@font-face成果

网页上展示最多的内容是什么？文字！即使利用图片再多的网页，也不会丢掉文字标记。

@font-face语句是css中的一个成果模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要思量欣赏者电脑上是否安装)。

@font-face文件

而由于网页中利用的字体范例，也是各欣赏器对字体范例有差异的支持规格。 字体名目范例主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

• TrueType

  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），字体文件被压缩，以便于网络传输。

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

  SVG是由W3C拟定的开放尺度的图形名目。SVG字体就是利用SVG技能来泛起字体，尚有一种gzip压缩名目标SVG字体。

@font-face文件转换生成

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

这里推荐几个@font-face文件转换网站：

freefontconverter

font2web

中文@font-face

上面的这些@font-face转换网站都不支持中文字体的转换，中文字体文件相对付英文显得过于复杂，很长一段时间都被认为是不适合嵌入网页的。

直到几年前，这个问题终于被一个日本网站办理了，他用的技能就是截取法，在前端置入一个js剧本，剧本自动按照网页内容当令生成一个小字库（只包括当前网页内容的小字库）然后自动转换成.ttf、.eot、.woff、.svg等名目嵌入网页中，从页实现@font-face结果。体验和英文@font-face差不多，结果很是大度。但日文@font-face网站对付中文网页还无法支持。

假如是你想在你的网页上利用中文简体@font-face处事，也不是不行能，推荐一其中文@font-face网站——“有字库”。

利用时，只需要引用一段js剧本代码可能一段css代码，网站就会自动帮你截取网页需要的小字库并生成.ttf、.eot、.woff、.svg等名目文件，你可以将各文件下载下来，也可以托管在这个网站上，很是利便。去试试吧