大创意有限公司,中山4A   天创|中山4A
中山.北京.深圳 
         
    品牌VI 标志 画册 印刷 包装 影视 摄影 空间SI  
 
 
在线字体转换/ ttf字体抟换eot字体
标签:在线字体
文章来源:中山4A  作者:  更新时间:2012-11-16
 

 

如果本地没装微软雅黑,网页改怎么显示雅黑字体,经过查找资料终于得到解决! 在设计布局网页时 经常想要用一些比较好看的字体,比如微软雅黑,这个字体在近年来在网页设计中运用越来越平常, 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。

经过一位高手的提点,能用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

 
品牌分享 / 品牌管家 【返回】
 
+ 分享
+ 知识
+ 博客
+ 微博
 
 
服务类别 /
 
VI设计 品牌设计 品牌命名
品牌策划 画册设计 宣传册设计
产品摄影 网站设计 展会设计
展示设计 网站建设 标志设计
海报设计 logo设计 单张设计
包装设计 折页设计 内刊设计
彩色印刷 包装印刷 画册印刷
空间设计    

 

 
 
 
 
 
 
     
 
         
         
欢迎来到天创品牌|中山4A
Welcome to CreatBrand office.
  关注我们
Pay attention to.
  友情链接
Parther.
         
         
在这几年的发展探索中,天创一直秉承着“专业、创新、锐意进取、勇往直前”的理念,倡导市场与品牌并重的原则。   天创品牌|中山4A唯一官网:
http://www.zs4a.com
http://www.zs4a.cn
  战略合作伙伴:
网站搜索引擎登录口大全

LED画册设计.LED产品画册设计.LED企业画册设计.LED目录设计. LED图册设计.LED画册.,LED形象画册.LED品牌画册设计.LED宣传册设计

中山广告公司是一家立足于中山本土,帮助企业创立品牌的综合性的广告公司,致力于企业品牌的建设, 企业视觉识别系统VIS导入与执行、形象策划、品牌推广、中山品牌设计、空间设计、企业画册(中山画册设计)、展览与展厅设计制作、商业摄影以及媒体制作等。
天创认为好的品牌不只是形式,不只是技巧,不只是视觉,它更应是思想的透析与策略的必然;其内涵指向应独具市场穿透力、沟通力与推广力,其表现风格应是国际化、本土性及品质化的。中山设计公司努力为客户提高具有思想,有市场穿透力和影响力的专业服务,使客户能在同行业的市场竞争中脱颖而出,得到消费者的关注和认可。

 

 

 

 

我们的微博 
企业邮箱 | 在线传真 | 天创办公

天创论坛 | 大创意.微客 | 甩麦网
大创意.论坛

中山设计公司 . 中山画册设计 . 中山广告公司
中山品牌设计 . 小榄广告公司
古镇广告公司 . 设计 广告公司网站

灯饰画册设计.灯饰目录设计.灯饰图册设计.灯饰企业画册设计

照明画册设计.照明产品画册设计.照明企业画册设计.照明目录设计.照明图册设计.照明画册.照明形象画册.照明品牌画册设计.照明宣传册设计

 

 

 

 

视觉中国 . 设计在线
中国设计网
Arting365
百度搜索 . 360搜索 . 谷歌搜索

更多友情连接.

 

 

 

         
   
   微信号:a88859709
   
         
 
广东高端品牌设计公司
CIS: BI.VI.MI.SI.
画册.设计.专卖店.印刷.摄影. T:0760-8885.9708
B:0760-8816.8499
:134.2555.5597
 
Copyright◎2008-2014 zs4a.COM zs4a.CN 中山广告公司|中山画册设计|中山品牌设计|大创意 版权所有,侵权必究 粤ICP备07014981号
中山设计公司 中山画册设计 中山品牌设计公司 中山广告公司 大创意网 中山广告公司