为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.09.03 17:21 999浏览

@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+)

内容IE6IE7IE8FF3.5+ChromeSafariOpera
.ttf,.otf不支持支持支持支持支持
.eot支持不支持不支持不支持不支持
.svg不支持不支持支持支持支持
woff不支持支持支持支持支持

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

在线字体格式转换网站

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

webp


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

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

webp

@font-face使用小结

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

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

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

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



作者:荷小音
链接:https://www.jianshu.com/p/0b33e62003e9


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消