如果本地没装微软雅黑,网页改怎么显示雅黑字体

转载 2012年03月22日 12:51:15

在设计布局网页时 经常想要用一些比较好看的字体,比如微软雅黑,这个字体在近年来在网页设计中运用越来越平常, 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。

经过一位高手的提点,能用CSS直接实现,查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体


我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的IE用户 EOT字体的重要性也就不说了

对于其他浏览器由于直接支持TTF字体 就不多介绍 只是在定义样式时 注意下浏览器的兼容问题就可以了

由于各浏览器对 '@font-face' 规则字体格式支持存在差异,若仅通过定义一个 '@font-face' 规则,可以通过 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字体效果:

<style type="text/css">
<!--

 定义字体
@font-face {
    font-family: " your FontName ";
    src: url( /location/of/font/FontFileName.eot ); /* IE */
    src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
    }
调用部分
 .yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }  
-->
</style>

 

<body>
<span class="yourFontName ">微软雅黑显现效果</span>
</body>


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

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

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

在线的转换工具

http://ttf2eot.sebastiankippe.com

相关文章推荐

界面原型工具 Balsamiq Mockup

最近又有了写一些小程序玩玩的心思,不得不说是受到一点aleung的影响。在动手之前希望把能够多考虑清楚,对于小软件而言,我想最佳的方式就是将界面画出来。感觉这个跟把心里的想法整理成文一样,这个过程本身...

SSH2框架搭建 和 配置文件详解

SSH框架,当今最为流行的项目开发框架组合,那么掌握他的第一步是学习如何配置环境,java Web开发的无论哪种框架都离不开各种xml配置,虽然说配置在网上到处都有,但是要成为合格的程序猿,必须要明白...

让fpdf支持utf8(附带设置微软雅黑字体)

让fpdf支持utf8(附带设置微软雅黑字体) highcharts 画图+fpdf输出图表

css中正确设置微软雅黑字体

宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimS...

【微软雅黑字体的简单介绍】

现在知道微软雅黑字体的人并不多。而在这里我们win7系统下载将对微软雅黑字体进行简单的介绍,和它的由来,还用它跟我们电脑上其它字体对比起来有什么好处,现在很多电脑的字体基本上都是宋体,而如果你有个不一...

微软雅黑字体包替换XP的宋体(附下载)

2007年春节在家接触到了雅黑字体:搜到的很多网上很多文章都是介绍如何让Vista的雅黑字体回滚到宋体格式,看来字体的变化对于用户感受是很大的,Vista很多面向宽屏,笔记本LCD的改进,在非Clea...

微软雅黑字体

  • 2011年10月05日 15:14
  • 14.35MB
  • 下载

生成的pdfmake微软雅黑字体vfs_fonts.js

  • 2017年05月27日 18:38
  • 19.26MB
  • 下载

更高效的Matlab:适合长时间码代码的配色与Monaco_雅黑字体

更高效的Matlab:适合长时间码代码的配色与Monaco_雅黑字体问题的提出之前在用VS的时候都是自动有黑色背景主题设置,只需安装程序员字体Monaco,再装好VsVim插件即可快乐地码代码了。最近...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如果本地没装微软雅黑,网页改怎么显示雅黑字体
举报原因:
原因补充:

(最多只允许输入30个字)