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

转载 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

微软雅黑字体的bug,可能不是我第一个发现的

 偶然发现使用微软ie7 rc (v7.0.5700.6)浏览网页时演员的“演”字有时会显示成“漠”,注意这种情况只在字体使用雅黑且为加粗效果时出现,见附图(如html中和标签,word2007字体加...
  • epbon
  • epbon
  • 2006年12月18日 22:57
  • 2700

在ubuntu中安装微软雅黑字体

http://forum.ubuntu.org.cn/viewtopic.php?t=21372&postdays=0&postorder=asc&start=0看了好多对中文字体的美化的贴,但我对我...
  • ggjjzhzz
  • ggjjzhzz
  • 2007年03月24日 18:47
  • 6197

微软雅黑字体模糊问题

最近重装了xp系统,发现360浏览器上很多字很模糊,尤其是浏览历史的时候,跟别人聊qq也发现有些字体显示模糊,找了一下原因似乎是微软雅黑的字体会出现这样的情况。  在网上搜了一下,找到了解决方案:  ...
  • casilin
  • casilin
  • 2010年11月05日 11:26
  • 2803

ubuntu 14.04 安装微软雅黑字体

使用终端跳转到放置字体的目录下 cd /home/username/dows 将字体移动到ubuntu的字体目录下,需要使用root权限,以微软雅黑为例 sudo mv ...
  • happinessaflower
  • happinessaflower
  • 2015年01月08日 11:35
  • 4130

CentOS 安装 微软雅黑字体

#所有操作均在root权限下进行  1、到Windows XP或者Vista下复制字体到CentOS 或者到这下载: [html] view plain copy ...
  • QDseashore
  • QDseashore
  • 2017年10月09日 15:45
  • 401

CentOS安装微软雅黑字体

#所有操作均在root权限下进行  1、到Windows XP或者Vista下复制字体到CentOS 或者到这下载: http://linux.linuxidc.com/pub/2009/11...
  • stability4884
  • stability4884
  • 2015年11月30日 11:48
  • 3940

为什么在css中设置了font-family:" 微软雅黑"没有用

首先可以用{font-family: 微软雅黑;}如果这样不行还可以用:{ font-family: “Microsoft YaHei” ! important; }使用中最好不用中文,中文的话,...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2016年10月05日 12:52
  • 15747

CSS中文字体如宋体/微软雅黑的英文名称写法

我们在制作网页前端的时候,最常会遇到的两种中文字体是“宋体/微软雅黑”,你可以在css里面定义写成中文,但是这样的坏处是在英文的系统里面支持会不太好,为求保险,微软雅黑字体的css可以这样定义: f...
  • panying0903
  • panying0903
  • 2015年06月25日 15:03
  • 2453

linux安装微软雅黑等字体

linux安装微软雅黑等字体 1、检查字体是否已经安装: fc-list                   ----------检查所有已有的字体 fc-list :lang=zh      ...
  • myflysun
  • myflysun
  • 2017年09月21日 18:14
  • 1082

MAC OS:安装设置中文字体为微软雅黑

本人的台式机分辨率比较低,加上MAC OS的中文字体模糊,决定将Windows的微软雅黑装上去。 1. 从windows 7下复制微软雅黑的字体文件到MAC OS任意位置   C:\Win...
  • annkie
  • annkie
  • 2013年01月22日 21:12
  • 6428
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如果本地没装微软雅黑,网页改怎么显示雅黑字体
举报原因:
原因补充:

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