在网页中嵌入任意字体的解决方案

开往->网页应用方向 | 驾驶员: | 热心乘客 (5)人

最近帮一个女孩做博客，他特别喜欢“喵呜字体”，很可爱的一种字体。最后想办法帮他实现了，其实一开始的时候就可以实现没问题的，但是呢，喵呜那个字体一个文件就5M，是ttf格式的，ie浏览器识别不了。最后找相关软件处理ttf格式–>eot格式，也没解决掉，还有几款付费的软件没去尝试，最后在一个国外的网站找到了实现方法，（格式转换网址，选择设置选项，下载文件包以后，里面有css文件demo文件）。

最后效果如下图：

font

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

  • .TTF或.OTF，适用于Firefox 3.5、Safari、Opera
  • .EOT，适用于Internet Explorer 4.0+
  • .SVG，适用于Chrome、IPhone

字体声明如下：

@font-face {
 font-family: 'FZMiaoWuS-GB';
 src: url('fzmwfont-webfont.eot');
 src: local('☺'), url('fzmwfont-webfont.woff') format('woff'), url('fzmwfont-webfont.ttf') format('truetype'), url('fzmwfont-webfont.svg#webfont87yVM3QN') format('svg');
 font-weight: normal;
 font-style: normal;
}

在页面中需要的地方使用该字体：

    p { font: 13px FZMiaoWuS-GB, Arial, sans-serif; }
    h1{font-family: FZMiaoWuS-GB}

或者

     <p style="font-family: fontNameRegular">网页字体</p>
 
发车日期：2010.08.17 | 候车室: ,

上一站>:
下一站>:

热心乘客: 5名

  1. 电脑 说：
    2010年08月18日 于 12:36 下午

    文章很好,不错

    [回复]

  2. MC 说：
    2010年08月22日 于 10:34 上午

    这个字体真可爱!
    我也想要啊!!!!

    [回复]

    飘雨云翳 回复:
    2010.08.23 at 11:56 上午

    这个字体是喵呜！呵呵……

    [回复]

  3. 睿智小超人 说：
    2010年08月24日 于 12:05 下午

    应该要将字体文件上传到空间吧。

    [回复]

    MC 回复:
    2010.10.02 at 11:08 下午

    貌似是的，上传后就变成整个网站最大的单个文件了。。

    [回复]