CSS3新特性(04):@font-face

@font-face是CSS3新特性中的一个模块,今天就来介绍下它。它主要是把自定义的Web字体嵌入到你的网页中。说白了就是可以帮助你在网页上使用漂亮的特殊字体,即非Web安全字体.

而不用担心,你的网页发布以后,浏览者的电脑万一没安装这个字体就坏事了的情况。一般不是专业从业人员,如设计师,普通网友的字体库是不会装太多字体的。所以@font-face就派上用处了。

@font-face怎么用?

(1)@font-face的语法:

@font-face {
    font-family: 'Your Web Font Name';
    font-weight:normal;
    src: url('fonts/YourWebFontName.eot');
    src: url('fonts/YourWebFontName.eot') format('eot'),
         url('fonts/YourWebFontName.woff2') format('woff2'),
         url('fonts/YourWebFontName.woff') format('woff'),
         url('fonts/YourWebFontName.ttf') format('ttf'),
         url('fonts/YourWebFontName.svg') format('svg');
}
 
p { font-family: 'Your Web Font Name', serif; }

当然还有这种写法的:

@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
src:local('YourWebFontName'),
    url('fonts/YourWebFontName.woff2') format('woff2'),
    url('fonts/YourWebFontName.woff') format('woff'),
    url('fonts/YourWebFontName.ttf') format('ttf'),
    url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
}
p { font-family: 'Your Web Font Name', serif; }

(2)语法解析YourWebFontName:指你自定义字体的名称,最好使用你下载字体的默认名称,他将被引用到你Web元素中的font-family里。url:里面填你下载要用字体的绝对或相对地址。比如url('../gebz/pts55f-webfont.woff')。format('woff'):括号中填字体的格式,主要用于帮助浏览器识别。一般有ttf,otf,woff,eot,svg几种常见字体格式,这个下面会介绍)。

第二种写法中的local是一种hack的手法。目的是保护IE浏览器。如果没有这句,IE会尝试将第二个src描述符的值读作一个路径,并向服务器发出一个额外无用的请求。特地写了第一个src的目的也是为了保证IE能读到正确路径。具体可参看《CSS3实用指南》ZM. Gillenwater. 页码P112-P114。

另外这种写法在Android系统中会有BUG,感兴趣的同学可以看看《BestPracticeFor@Font-Face》。改进方法可以写两个@font-face,一个兼容IE,另一个非IE。比如:

@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
}
 
@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src: url(//:) format("no404"),
     url('fonts/YourWebFontName.woff2') format('woff2'),
     url('fonts/YourWebFontName.woff') format('woff'),
     url('fonts/YourWebFontName.ttf') format('ttf'),
     url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
 
}
p { font-family: 'Your Web Font Name', serif; }

url(//:)format("no404")是一种Bulletproof写法,感兴趣的同学可看《New@Font-FaceSyntax:Simpler,Easier》一文。另外,为了使@font-face达到更多的浏览器支持,PaulIrish写了一个独特的@font-face语法叫《Bulletproof@font-face》

字体格式以及支持的浏览器

  • TureType(.ttf)格式
    (.ttf)字体是Windows和Mac的最常见字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有:
    (IE9+,FF3.5+ Chrome4+,Safari3+,Opera10+,IOSMobileSafari4.2+)
  • OpenType(.otf)格式
    (.otf)字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有:
    (FF3.5+ ,Chrome4.0+,Safari3.1+,Opera10.0+,IOSMobile Safari4.2+)
  • Web Open Font Format(.woff)格式
    (.woff)字体是Web字体中最佳格式,可以看作是 TrueType、OpenType 字体数据的简单重新封装,不过内建了压缩功能,因而体积更小、方便下载和传播。另外还支持元数据,所以厂商可以在他们的字体中加入相关识别信息。支持这种字体的浏览器有:
    (IE9+,FF3.5+,Chrome6+,Safari3.6,Opera11.1+)
  • Embedded Open Type(.eot)格式
    (.eot)字体是IE的专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有:(IE4+)
  • SVG(.svg)格式
    (.svg)字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有:
    (Chrome4+,Safari3.1+,Opera10.0+,ISO MobileSafari3.2+)
内容 IE6IE7IE8 FF3.5+ Chrome Safari Opera
.ttf,.otf 不支持 支持 支持 支持 支持
.eot 支持 不支持 不支持 不支持 不支持
.svg 不支持 不支持 支持 支持 支持
woff 不支持 支持 支持 支持 支持

由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。
当然这些不同的字体格式哪里来呢?网上有一些专门的字体格式转换的网站。

在线字体格式转换网站

(1)Fontsquirrel
主要是英文字体转换,上传你已有的字体格式以后,进行转换就可以得到一个装有多种字体的压缩文件,解压缩后,里面除了@font-face所需要的众字体格式外,还带有一个DEMO文件,不明白怎么使用的,可以看一下这个DEMO文件,但千万别复制DEMO文件,要不然我上面的语法解析就白讲了。

上传你的字体文件,然后选择中间的OPTIMAL推荐最佳格式,然后就可以转换了。

(2)EveryThingFonts
当上面的Fontsquirrel网登不上用不了时,可以选择在EveryThingFonts网试一试,可以下载中文字体,是我新发现的在线字体格式转换网站,也是我最近常用的工具,非常推荐,比Fontsquirrel网稳定。鼠标滑块将No滑为Yes,点击Pick Font File上传你已有的字体,然后点击Convert进行转换即可。

@font-face使用小结

如果你的项目中是英文网站,而且项目中的LOGO,TAGS等应用到较多的特殊字体效果,则比较建议用@font-face,但如果是中文网站,还是使用图片比较合适,因为加载英文字体和图片没多大区别,但是加载中文字体可能会影响性能优化,因为中文一套字体一般要3-6M,这样的庞然大物嵌入网页上,结果可想而知,在页面加载完成前已经被关掉了。

当然,不是说中文就无法通过@font-face实现嵌入,但需要再麻烦一步:按需截取(根据文章所涉及到的文字生成小字库),中文的无论如何都要先截取一下的。如此便能最大程度地节约流量,将字体减到最小。

看到漂亮字体不知是啥字体咋办?

最后推荐一个用图片搜索字体的网站——求字网,你一定碰到过这样的情况,看到某个网站使用了很漂亮的字体,想知道是什么字体?除了可以查阅源代码获取,还可以将文字截成图片,放到求字网上去匹配搜索,当然我更建议使用源代码,因为有时求字网数据库不够全会找不到答案。

推荐阅读更多精彩内容

  • 摘要:本篇文章包括(1)介绍@font-face(2)如何在网页中使用@font-face插入特殊字体(3)中文在...
    Masukio阅读 15,169评论 0 17
  • 字体转换工具:fontmin-app在线转换:web-fontmin 本文参考地址:CSS3 @font-face...
    丶Dahl阅读 444评论 0 1
  • font-face是css3中允许使用自定义字体的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。到了今...
    Rin阳阅读 9,985评论 0 11
  • 基础知识 @font-face虽然是CSS3模块,但是IE4时代开始就已经支持了它,只不过跟现在CSS3的功能相比...
    microkof阅读 871评论 0 2
  • 标签(空格分隔): CSS3 @font-face的是一个CSS规则,允许在网站上使用特定的字体,即使她在访问者的...
    ahcj_11阅读 639评论 0 0
  • 百度无数,谷歌无数,都特么只有xib和storyboard的文章,但是个人就是喜欢纯代码,所以试验了无数次总结了下...
    new_blash阅读 2,208评论 6 6
  • 凌晨四点,忘了是第几个失眠的夜晚,辗转反侧,与其让时光这样流逝,不如随手记录吧,哪怕是寥寥几笔。 自从之前的经历,...
    小7_alice阅读 60评论 0 0
  • 我们在浏览器地址栏, 输入了 www.sina.com.cn , 网页就显示出来了.那具体它为什么会显示出来的? ...
    菜菜爱学习阅读 362评论 0 0