CSS的@font-face属性实现在网页中嵌入任意字体

作者佚名技术来源 CSS技术浏览发布时间 2012-02-28

或者

<p style="font-family: fontNameRegular">掬水月在手，落花香满衣</p>

下面是我通过上面两步做的示例：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在网页中嵌入任意字体的完整解决方案 - CSS9.NET</title> <link rel="stylesheet" href="http://www.blueidea.com/articleimg/2009/12/7263/style.css" /> <style type="text/css"> @font-face { font-family: ''hakuyoxingshu7000Regular''; src: url(''http://www.blueidea.com/articleimg/2009/12/7263/7000.eot''); src: local(''hakuyoxingshu7000 Regular''), local(''hakuyoxingshu7000''), url(''http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf'') format(''truetype''), url(''http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000'') format(''svg''); } #poem{ font-size:45px; font-family:hakuyoxingshu7000Regular; text-align:center; } #poem p{height:30px;line-height:30px;} </style> </head> <body> <div id="testdiv"> <h1>在网页中嵌入任意字体的完整解决方案 - CSS9.NET</h1> <h2>访问原文： <a href="http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a>   关注Web前端开发 - <a href="http://css9.net">CSS9.NET</a></h2> <div id="poem"> <h3>云为素食</h3> <p>京城有同窗，相约素食阁。</p><p>听者犹未尽，言者语已多。</p><p>满座皆友朋，畅谈何民科。</p><p>禅中寄小语，慎言且柔和。</p> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上面文中的字体用的是本博客之前发布的一款钢笔行书字体，喜欢的可以去下载。

下载该示例的源代码：网页嵌入字体示例

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: 网页制作有用资料:网页常用英文字体下一篇: ID类和class类的长命名与短命名

关于CSS的@font-face属性实现在网页中嵌入任意字体的所有评论

随机推荐