CSS3 @font-face详解

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 class="style"> 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;
}