CSS3的@font-face实现页面嵌入个性字体

PC端网页上面的中文字,为了“安全”,基本都是:宋体和微软雅黑,偶尔会用黑体和楷体。如果想换其他的话,问题是客户的电脑里没有相应的字体文件,你声明了字体也是显示不了的。有没有新的方法?有的,就是CSS3提供的@font-face,先看看一个案例:

css3 font
锤子官网的页面截图,里面的文字就用了其它字体

CSS3里的@font-face。可以使客户浏览页面的时候,会自动把页面里声明的字体文件下载到本地,实现了个性的字体表达。

@font-face用法

@font-face{
font-family: myfontname;
src: url('fontname.ttf'),
     url('fontname.eot'); /* IE9+ */
}

兼容性


Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
IE 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
IE 8 以及更早的版本不支持新的 @font-face 规则。

字体类型

字体类型主要有以下几种类型:
.ttf
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,它没有为网站而优化;
.otf
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能;
.woff
.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离;
.eot
.eot字体是IE专用字体,可以从TrueType创建此格式字体;
.svg
.svg字体是基于SVG字体渲染的一种格式。

具体例子

我已经下载了一个英文字体vanadine,而且转换了不同格式。

HTML部分:

<div class="myfonttitle">网页嵌入字体</div>

CSS部分:

@font-face {
font-family:'vanadine';
src:url('fonts/vanadine_regular-webfont.eot');
src:url('fonts/vanadine_regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/vanadine_regular-webfont.woff') format('woff'),
    url('fonts/vanadine_regular-webfont.ttf') format('truetype'),
    url('fonts/vanadine_regular-webfont.svg#vanadine') format('svg');
}

.myfonttitle { font-family:'vanadine';}

在线演示

 

体积问题

一般很少对中文采用嵌入字体文件,因为中文字体文件的体积都很大,少则几M,大的有几十M,影响性能和加载速度。英文字体的体积比较小,最多也就是几百K左右,相当于下载一张普通的jpg图片,完全可以使用@font-face。

怎么制作字体文件?

1、先去一些免费的网站下载文字,推荐:Google Web FontsDafont.com

2、把得到的字体转换格式,因为要兼容不同浏览器需要不同的字体格式,常用的一个工具 fontsquirrel