非网页保险字体不再依赖Cufon！CSS @font-face的使用

2012-08-17

非网页安全字体不再依赖Cufon！CSS @font-face的使用网页安全字体这个概念前端们应该都清楚，那遇到非网页安

非网页安全字体不再依赖Cufon！CSS @font-face的使用

网页安全字体这个概念前端们应该都清楚，那遇到非网页安全字体为了保证网页在用户电脑中显示不破坏页面整体的设计，通常少量的文字可以用图片来代替，也可以用Javascript的Cufon来画出这个字体。那实际上这些字体都是付费使用的，这两种做法都有可能引发一些侵权的问题，也会在一定程度上拖慢网页的浏览速度。所以现在推荐使用@font-face，通过将字体文件上传到服务器端来保证客户端的显示一致。

@font-face使用方法

<br></p>Chrome<p>如果给字体设置了text-shadow属性，在Chrome中@font-face就会显示失败。</p>IE<p>可能是你的EOT字体文件已损坏。</p> </p><div class="aged2"><script type="text/javascript">a("article_content_down");</script></div>
 </div>
<div id="pagebox" >
<a href="/jiaocheng/css/" target="_blank">查看更多</a>
<A href="/jiaocheng/20120306/1295153.html" title="IFRAME无法显示,该怎么解决">下一篇</A></div>
<div id="MainLeftll">
<div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.com/jiaocheng/20120817/1295154.html">https://www.reader8.com/jiaocheng/20120817/1295154.html</a></div>
<div class="related"><span class="relatedIco1">读书人精选</span>
<ul class="relatedList">
</ul>
</div>
<div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div>
<div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div>
</div>
</div>
<!-- 文章正文左边结束 -->
<!-- 文章正文右边开始 -->
<div class="leftbox_r">
<div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> 
<div class="Rtitle">
<span class="Rtitle_text">热点排行</span></div>
<div class="RContl">
<ul>
<li><a href="/jiaocheng/20140105/1299674.html" target="_blank">html块级元素跟内联元素区别详解(转)</a></li>
<li><a href="/jiaocheng/20121012/1283850.html" target="_blank">请各位师傅看看上面的代码是如何加密的</a></li>
<li><a href="/jiaocheng/20131230/1268065.html" target="_blank">asp.net主页自适应分辨率浏览器</a></li>
<li><a href="/jiaocheng/20120524/1295759.html" target="_blank">关于event.srcElement的一些有关问题</a></li>
<li><a href="/jiaocheng/20131223/1296659.html" target="_blank">html文件的doctype从Transitional改为St</a></li>
<li><a href="/jiaocheng/20140117/1280563.html" target="_blank">css怎么清除浮动</a></li>
<li><a href="/jiaocheng/20130402/1292516.html" target="_blank">HTML 五搴旂敤寮?彂瀹炶返鎸囧崡</a></li>
<li><a href="/jiaocheng/20120403/1273188.html" target="_blank">IE6弹出窗口中移动窗口滚动条时里面的下</a></li>
<li><a href="/jiaocheng/20120722/1271890.html" target="_blank">用仿ActionScript的语法回编写html5——</a></li>
<li><a href="/jiaocheng/20140108/1268198.html" target="_blank">CSS3 Media Queries在iPhone4跟iPad上的</a></li>
</ul>
</div>
<div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div>
<!-- 文章正文右边结束 -->
</div>
<!--主体结束-->
<script type="text/javascript">a("article_down_up");</script>
<script type="text/javascript">a("foot");</script>
<script type="text/javascript">a("article_down_up2");</script>
<!--主体结束-->
<div style="display:none"> 
<!--百度统计代码--> 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div> 
<script type="text/javascript">a("allbt");</script>
</body>
</html>