CSS3 字体

CSS3 @font-face 规则

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

<style> 
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
     url(‘Sansation_Light.eot‘); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf‘),
     url(‘Sansation_Bold.eot‘); /* IE9+ */
font-weight:bold;
}

@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等格式文件，你可以将各文件下载下来，也可以托管在这个网站上，非常方便。去试试吧

CSS3 字体,古老的榕树,5-wow.com