网页ie内嵌Fonts与css3样式

网页ie内嵌字体与css3样式

 

内嵌字体，那么什么是内嵌字体呢。
多年以来，我们在编写网页的时候，使用的字体只能是屈指可数的几种标准字体，
因为多数浏览器只能够调用用户电脑上已经有的字体，这样非常影响美观，也局限了设计者的才能。
以前为了实现美丽个性的字体，只有使用图片，这使得网页设计受到很大的限制。
而内嵌字体有效解决了这一问题，内嵌字体是储存在服务器上的，所以无论用户机器上是否有网页设计者使用的字体，
网页都能够按设计者的想法来显示，这大大增加了设计的灵活性，和简化了制作大量图片的工作,并且显示的文字可以被粘贴。
支持CSS3中@font-face这个语法，这使得使用这一语法的时机终于成熟。
目前，各大浏览器，火狐，Opera，Chorme全都支持@font-face,
而IE其实早在1997年的IE4就开始支持内嵌字体了，
只是IE包括现在新版的IE8支持内嵌字体的标准跟其他浏览器不同，
IE并不支持CSS3格式的内嵌字体语法，它有它自己支持的语法，而且它只支持微软eot格式的字体，
这给我们写网页制造了麻烦，下面就来解决这个麻烦。

CSS3的@font-face语法标准:

首先这样定义,其中"yourFontName"是你自己定义的内嵌字体名字,
这个名字可以在以后的网页代码中调用.
src就是英文"source"的缩写,后面给出字体的网络位置,字体使用的是我们常见的ttf字体文件

代码 复制 - 运行
 
    @font-face { 
      font-family: yourFontName ; 
      src: url( /font/FontFileName.ttf ) format("truetype"); 
    } 

 

代码 复制 - 运行
    /* 然后你就可以这样来调用了 */ 
    .yourFontName { font-family: yourFontName; 
    }

@font-face 跨浏览器代码:

上面这样的代码在非IE的浏览器中显示正常,IE就不行了,
IE不支持ttf,转而支持"Embedded OpenType" eot字体.
要做到跨浏览器支持,我们必须改一下css代码,
首先把你的ttf字体转换为eot文件

使用方法：
1、基于命令提示符
2、命令行：ttf2eof.exe src_filename.ttf target_filename.eot

然后把eot和原先的ttf两个字体文件一同上传到你的服务器
使用一个@font-face为IE读取eot字体,为其他浏览器读取ttf

代码举例:

定义字体

代码 复制 - 运行
    @font-face { 
      font-family: "your FontName"; 
      src: url( /font/FontFileName.eot ); /* IE */ 
      src: local("real FontName"), url( /font/FontFileName.ttf ) format("truetype"); /* 非IE */ 
    } 

调用部分无变化

代码 复制 - 运行
    .yourFontName { font-family:"your FontName"; 
    }  

解释一下,"your FontName" 为自定义字体名字,
         "real FontName"是真实字体名字,
非IE浏览器读到第一行,一看是eot字体,跟自己没关系,于是跳到第二行,
读取"local"(本地)定义的字体,试图到用户机器上去找这个字体
(所以一定要用真实的字体名字,这样万一用户机子上有该字体就可以省去用户一个ttf的下载),
发现没有就从后面的"url"的路径去下载ttf文件了
而IE过程相反,它读到第一行发现是eot, 但是执行以前他会去继续读后面的行,
所以"local"定义非常必要,IE不认识"local",它就晕了,
只好倒回去下载eot,如果没有local定义的话,这段字体定义代码对IE是无效的.

跨浏览器的内嵌字体css定义就完成了.

最后还有一个问题,中文内嵌字体下载量过大的问题,英文字体一般比较小,中文字体动辄几MB,下载量太大,
看来中文内嵌字体要完全实用要给字体减肥才行,比如只保留字体里面网站使用的字,不用的字全部剔掉,
这样就能大大减小体积了.

css3 部分样式支持

下载ie-css3.htc

在你所带有css3样式的每个样式里面加入 behavior: url(fonts/ie-css3.htc);

 

谢谢翻阅!希望对你有所帮助
         CopyRight by qvb3d seazou

 

以上传实例文件
         ie-eot11.rar       为有资源文件

         ie-eot_two.rar     为改变的实例