CSS3 @font-face详解

2016-12-31 10:38:58来源:作者:wsj123人点击

CSS3 @font-face详解
1.1概述
@font-face是CSS3中的一个模块,主要是把自己定义的Web字体嵌入到网页中。
1.2语法规则
语法:
@font-face {
font-family: <yourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
参数说明:
yourWebFontName参数,是指自定义的字体名称。
source参数,是指自定义字体的存放路径,可以是相对路径也可以是绝路径。
format参数,是指自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等。
1.3对浏览器的兼容性
不同的浏览器对文字格式的支持是不一样的,所以要达到更多种浏览版本的支持,至少需要.woff,.eot两种格式字体,甚至还需要.svg等格式的字体。
为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'),
url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}
但为了让各多的浏览器支持,也可以写成:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
兼容性处理介绍如下:
在标准浏览器中,src属性支持后面跟着多个url,不同的浏览器会选择适合自己的字体;但是IE9之前的浏览器并不支持,当 src属性包含多个url时,它无法正确的解析而返回404错误,于是把仅IE9之前支持的EOT格式放在第一位,然后在url后加上 ?,这样 IE9之前的版本会把问号之后的内容当作 url 的参数;#iefix的作用,一是起到了注释功能,二是可以将url参数变为锚点,减少发送给服务器的字符。
在上面的代码中,有两个src属性,通常只写下面的一个即可,第一个是为了支持IE9下的兼容模式(也就是IE9浏览器下使用IE7或者IE8默认渲染页面);由于在兼容模式下,浏览器对自定义字体的解析模式发生了变化,使用第一条中问号的方式已经失效,解决方案就是添加一个src: url(' YourWebFontName.eot')。
1.4实例详解
HTML代码:
<h2 > I Love You</h2>
CSS代码:
通过@font-face来定义自己的Web Font:
@font-face {
font-family: 'SingleMalta';
src: url('../font/SingleMalta/SingleMalta.eot'); /* IE9 Compat Modes */
src: url('../font/SingleMalta/SingleMalta.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/SingleMalta/SingleMalta.woff') format('woff'), /* Modern Browsers */
url('../font/SingleMalta/SingleMalta.ttf') format('truetype'), /* Safari, Android, iOS */
url('../font/SingleMalta/SingleMalta.svg#SingleMalta') format('svg'); /* Legacy iOS */
font-weight:normal;
font-style:normal;
/*引用方式为相对路径*/
}
把定义好的字体应用到实际页面中去:
h2.style {
font-family: 'SingleMalta';/* SingleMalta是一种英文字体*/
}
1.5注意事项
如果项目是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,建议你不要使用图片效果,而使用@font-face,但如果是中文网站,还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化。
致命的错误,在定义@font-face时,文件路径没有载对。
只定义了@font-face,但并没有应用到项目中的DOM元素上。
1.6字体格式在线转换工具推荐
https://onlinefontconverter.com
1.4扩展应用——简化代码
如果一个字体不是全局的,每次用到的时候则都要写一遍,这样便很烦。但可以借助@font-face这种原生的特性来简化代码,如下:
@font-face {
font-family: YH;
src: local("microsoft yahei");/*local()表是从本地系统查找字体,如果找不到,再从url()指定的查找*/
}
然后,接下来要使用微软雅黑字体的字体,就可使用简化字符来设置字体:
.font {
font-family: YH;
}
iMac等苹果机子上默认没有微软雅黑字体,但要求Mac OS X系统上使用苹方字体,window系统上使用微软雅黑字体。要实现上述要求,可以借助@font-face,如下:
@font-face {
font-family: BASE;
src: local('PingFang SC'),
local("Microsoft Yahei");
}
然后,直接使用:
.font {
font-family: BASE;
}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台