首页 » 前端说 » 正文

关于web中的字体, .woff, .eot, .svg

一般情况下引用字体@font-face时,会把woff,eot,svg都引用进去,浏览器根据需要下载不同类型的字体。

IE–.eot;    其它浏览器–.woff;    手机浏览器一般是–.ttf;

truetype:
是windows和mac系统最常用的字体格式。

eot:
eot是嵌入式字体,是微软开发的技术,允许onetype字体用@font-face嵌入到网页。

onetype:
onetype是微软和Adobe共同开发的字体,IE浏览器全部采用这种字体。

woff:
woff(web开发字体格式)是一种专门为web而设计的字体格式标准,实际上是对truetype/onetype等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。

svg:
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体。

如何使用:
IE只支持微软自有的EOT格式字体,需要用字体转换工具将其转换为EOT格式,其他浏览器都不支持这一字体格式,其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体。

<span class="logo"></span>

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /* IE9 Compat Modes /   src: url('webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /        url('webfont.woff2') format('woff2'), / Super Modern Browsers /        url('webfont.woff') format('woff'), / Pretty Modern Browsers /        url('webfont.ttf')  format('truetype'), / Safari, Android, iOS /        url('webfont.svg#svgFontName') format('svg'); / Legacy iOS */
 }
logo{
font-family:
     'MyWebFont', 'PingFang SC', 
    'Helvetica Neue','Helvetica', 
    'STHeitiSC-Light',"Microsoft YaHei", 'Arial', sans-serif;
    font-size: 60px;

 }



font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。
注意了,“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么,可能是“Arial”,也有可能是“Helvetica”。
并始终提供一个类族名称作为最后的选择。
通常字体系列名称:比如:”serif”(无衬线)、”sans-serif”(衬线)、”cursive”(等宽)、”fantasy”(梦幻)、”monospace”(草体);

具体DEMO案例,这篇文章比较全。http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html

注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。

网页常用的字体:
Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常。

中文:
宋体:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
华文细黑:Mac下的默认中文。

字体引用的优先级

ios:中文:PingFang 苹方,STHeitiSC-Light 苹果黑体;英文:优先Gotham,Myriad Set Pro;STHeitiSC-Light 苹果黑体;

windows:yahei 微软雅黑

font-family:’PingFang SC’,’Gotham’,’Myriad Set Pro’ ,’STHeitiSC-Light’, ‘Microsoft YaHei’, sans-serifsans-serif;