CSS3新属性：在网站中使用访客电脑里没有安装的字体

chinahuzi 2021-09-15 原文

CSS的font-family属性使网页可以使用客户电脑里的字体，从而得到多姿多彩的WEB页面，但当客户端没有你想要使用的字体时怎么办呢？我们总不能让每个访问者都去安装一个字体吧？事实上，这是可以的！不过不是访客主动下载的，而是网站开发者帮访客下载安装的，具体怎么实现的，我们还要从字体文件的格式说起。

字体格式类型主要有几个大分类：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 – Web Open Font Format (.woff)

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

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

在CSS3中，添加了一个@face-face属性，通过这个属性我们就可以加载服务器上的字体文件，放在客户机的临时安装文件夹下，

用法如下：

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("fontawesome-webfont.eot?#iefix") format("eot"), url("fontawesome-webfont.woff") format("woff"), url("fontawesome-webfont.ttf") format("truetype"), url("fontawesome-webfont.svg#FontAwesome") format("svg");
}