个性化网页字体格式引用详解

作为网页设计师，我们希望用精美的字体来帮助我们为网页排版，好的排版是组成优秀网页设计的重要组成部分，字体在网页设计中扮演了相对重要的一个角色,所以在网站中，选用什么样的字体也是一个相对比较重要的工作。而网页使用的字体缺受制于操作系统，也就是说在一般情况下网页能呈现什么的字体取决于用户的操作系统有没有安装某个字体，若未预装即使被样式指定，网页也会退而求其次的启用系统自带的其它字体。这也是我们在不同电脑、不同手机上同一网页中看到不同字体的原因。

基于操作系统WEB可直接引用的字体就叫做网页安全字体，有关英文安全字体可以参阅本站《网页前端设计常用Web安全字体》，中文则可以参阅《CSS常用中文字体名转Unicode编码对照表》。

使用安全字体外的个性化网页字体，则需要上传相应字体文件到网页服务器中引用。不同浏览器所支持的字体格式不一样，以下是几种常见字体格式介绍：

TureTrpe（.ttf）格式

.ttf字体是Windows和Mac的最常见字体，是一种RAW格式，支持这种字体的浏览器有IE9、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile、Safari4.2+

兼容：基本兼容，IE兼容情况不是很好，缺点是未针对WEB优化文件本身往往比较大

OpenType（.otf）格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、IOS Mobile、Safari4.2

Web Open Font Format（.woff）格式

woff字体是web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

兼容：IE9+，android4.4+，其他兼容良好

Embedded Open Type（.eot）格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+

SVG（.svg）格式

.svg字体是基于SVG字体渲染的一种方式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、IOS Mobile、Safari3.2+

了解了上面的知识后我们就需要为不同的浏览器准备不同的字体，通常我们会通过字体生成工具帮助我们生成各种格式的字体，因此无需过于在意字体之间的格式差别。

WOFF2

WOFF2（Web Open Font Format 2.0），相比woff最大的优化应该是加强了字体的压缩比。

兼容：除IE及低系统移动端，其他兼容情况较好

综合比较后，从请求量上来看，woff\woff2格式文件最小：woff2 < woff < ttf ≈ eot < svg

样式引入字体方法：

body{

font-family: 'FZLTXHJW';

src: url('./FZLTXHJW.ttf') format('truetype'), url('./FZLTXHJW.svg') format('svg'),url('./FZLTXHJW.woff') format('woff');

font-weight: normal;

font-style: normal;

}

或：

@font-face{font-family:"abc"; src: url('any.ttf') format('truetype');}

body{font-family:"abc";}

IIS服务器svg、woff、woff2等字体文件引用显示404错误的解决方法：

1.打开服务器IIS管理器，找到MIME类型

2.添加类型

文件扩展名      MIME类型　

.svg             image/svg+xml
.woff            application/x-font-woff
.woff2          application/x-font-woff

关于@font-face

@font-face是CSS3属性，用来指定字体样式的。指定字体名为xxx的字体，并指定在哪里可以找到它的url。

@font-face用法的简要概述：先用@font-face指定好字体名和url，然后给html元素的font-size赋值为@font-face中指定好的字体名称，即可使用该字体。

什么是format属性？如何使用format属性？

format属性是帮助浏览器识别字体的。浏览器是不能根据字体url后缀去自动识别字体格式的，所以使用format属性来帮助浏览器识别字体格式。　　

　　例如：format(EmbeddedOpenType) 帮助浏览器识别.oet字体格式

　　format(OpenType) 帮助浏览器识别.otf字体格式

字体格式如下：

trueType格式(.ttf) -- Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。 浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf) -- 以TrueType为基础，也是一种原始格式，但提供更多的功能。浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff) -- 针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时支持元数据包的分离。浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)  -- IE专用字体格式，可以从TrueType格式创建此格式字体。 浏览器支持：IE4+

SVG格式(.svg) -- 基于SVG字体渲染的格式。 浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

网上流行的一种兼容性最高的@font-face语法：

@font-face { 
font-family: ‘YourWebFontName’; 
src: url(‘YourWebFontName.eot’);  
src: url(‘YourWebFontName.eot?#iefix’) format(‘embedded-opentype’),  
url(‘YourWebFontName.woff’) format(‘woff’),  
url(‘YourWebFontName.ttf’) format(‘truetype’),  
url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’);  
}

tips: 其中#后面表示引用名称，类似于别名。因为不是所有格式都被浏览器识别，所以不识别的时候加上备用引用名称。