CSS3 @font-face使用自定义字体和图标字体

@font-face的语法规则:

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

参数说明
YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

自定义字体格式

.ttf(TrueType格式):是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

.otf字体:被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

.woff (Web Open Font格式): 针对网页进行特殊优化,Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

.eot(Embedded Open Type格式):字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

.svg(SVG格式):是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

在@font-face中我们至少需要.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 */
   }

@font-face使用实例:

实例1

<style> 
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
div{font-family:myFirstFont;}
</style>

实例2

<h2 class="neuesDemo">Neues Bauen Demo</h2>

通过@font-face来定义自己的Web Font:

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

这里采用的是相对路径,也可以使用绝路径,把定义好的字体应用到我们实际页面中去:

h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

实例3:字体图标引入
使用字体图标的优势如下:
1. 矢量化:字体是矢量格式,因此能够轻松的适配不同的设备,而不必为不同分辨率的屏幕准备不同的图片资源。
2. 轻量性:字体相对于一系列的图片资源要更加的轻量,一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。
3. 灵活性:由于图标字体,本质上是一种字体而非一种图标,因此我们可以设置各种字体属性,例如通过设置font-weight, font-size, font-color来改变图标的粗细、大小、颜色。
4. 兼容性:网页字体支持所有现代浏览器,甚至连IE4都可以支持。
关于图标字体已经介绍的差不多了,该来点干货了。下面将介绍利用CSS3的@font-face使用图标字体的具体方法。我们这里继续以IconMoon为例来展示图标字体。下面是图标字体的页面代码。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>    
</head>
<body>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?carbqp');
            src: url('fonts/icomoon.eot?carbqp#iefix') format('embedded-opentype'), 
                 url('fonts/icomoon.ttf?carbqp') format('truetype'), 
                 url('fonts/icomoon.woff?carbqp') format('woff'), 
                 url('fonts/icomoon.svg?carbqp#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        [class^="icon-"], [class*=" icon-"] {
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .icon-google-plus:before {
            content: "\ea85";
            font-size: 60px;
        }
        .icon-youtube:before {
            content: "\ea97";
            color: rgb(210,0,0);
            font-size: 60px;
        }
        .icon-facebook:before {
            content: "\ea8a";
            color: rgb(59,88,155);
            font-size: 60px;
        }
        .icon-twitter:before {
            content: "\ea8e";
            color: rgb(26,178,232);
            font-size: 60px;
        }
    </style>
    <div class="icon-google-plus" style="float:left"></div>
    <div class="icon-youtube" style="float:left;margin-left:50px;"></div>
    <div class="icon-facebook" style="float:left;margin-left:50px;"></div>
    <div class="icon-twitter" style="float:left;margin-left:50px;"></div>
</body>
</html>

效果如下:

511遇见


发布日期:

所属分类: Css/Html5 标签:  


没有相关文章!