带来一篇CSS的@font-face属性完成在网页中嵌进恣意字体

只看该作者 · 发表于 2015-1-15 23:31:19

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
网页制造poluoluo文章简介：上面要讲的是怎样只经由过程CSS的@font-face属性来完成在网页中嵌进恣意字体。
字体利用是网页计划中不成或缺的一部分。常常地，我们但愿在网页中利用某一特定字体，可是该字体并不是支流操纵体系的内置字体，如许用户在扫瞄页面的时分就有大概看不到实在的计划。美工计划师最常做的举措是把想要的笔墨做成图片，如许做有几个分明缺点：1.不成能年夜局限的利用该字体；2.图片内容绝对利用笔墨不容易修正；3.倒霉于网站SEO（支流搜刮引擎不会将图片alt内容作为判别网页内容相干性的无效要素）。收集上有一些利用sIFR手艺、或javascript/Flashhack的办法，但完成起来或烦琐，或出缺陷。上面要讲的是怎样只经由过程CSS的@font-face属性来完成在网页中嵌进恣意字体。
第一步
猎取要利用字体的三种文件格局，确保能在支流扫瞄器中都能一般显现该字体。

.TTF或.OTF，合用于Firefox3.5、Safari、Opera
.EOT，合用于InternetExplorer4.0+
.SVG，合用于Chrome、IPhone

上面要办理的是怎样猎取到某种字体的这三种格局文件。一样平常地，我们在手头上（或在计划资本站点已找到）有该字体的某种格局文件，最多见的是.TTF文件，我们必要经由过程这类文件格局转换为其他两种文件格局。字体文件格局的转换能够经由过程网站FontsQuirrel或onlinefontconverter供应的在线字体转换服务猎取。这里保举第一个站点，它同意我们选择必要的字符天生字体文件（在服务的最初一个选项），如许就年夜年夜缩减了字体文件的巨细，使得本计划更具有用性。
第二步
猎取到三种格局的字体文件后，下一步要在款式表中声明该字体，并在必要的中央利用该字体。
字体声明以下：
@font-face{
font-family:fontNameRegular;
src:url(fontName.eot);
src:local(fontNameRegular),
local(fontName),
url(fontName.woff)format(woff),
url(fontName.ttf)format(truetype),
url(fontName.svg#fontName)format(svg);
}
/*个中fontName交换为你的字体称号*/
在页面中必要的中央利用该字体：
p{font:13pxfontNameRegular,Arial,sans-serif;}
h1{font-family:fontNameRegular}
大概
<pstyle="font-family:fontNameRegular">掬水月在手，落花喷鼻满衣</p>
上面是我经由过程下面两步做的示例：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>在网页中嵌进恣意字体的完全办理计划-CSS9.NET</title><linkrel="stylesheet"href="http://www.blueidea.com/articleimg/2009/12/7263/style.css"/><styletype="text/css">@font-face{font-family:hakuyoxingshu7000Regular;src:url(http://www.blueidea.com/articleimg/2009/12/7263/7000.eot);src:local(hakuyoxingshu7000Regular),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;}#poemp{height:30px;line-height:30px;}</style></head><body><divid="testdiv"><h1>在网页中嵌进恣意字体的完全办理计划-CSS9.NET</h1><h2>会见原文：<ahref="http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a>存眷Web前端开辟-<ahref="http://css9.net">CSS9.NET</a></h2><divid="poem"><h3>云为素食</h3><p>都城有同学，相约素食阁。</p><p>听者犹未尽，言者语已多。</p><p>满座皆友朋，泛论何平易近科。</p><p>禅中寄小语，慎言且温和。</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
下面文中的字体用的是本博客之前公布的一款钢笔行书字体，喜好的能够往下载。
下载该示例的源代码：网页嵌进字体示例
</p>
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

只看该作者 · 发表于 2015-1-21 16:40:10

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-1-30 21:14:15

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-6 16:01:23

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-2-17 01:30:52

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-5 14:51:37

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-3-12 08:52:32

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-19 20:21:14

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇CSS的@font-face属性完成在网页中嵌进恣意字体

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子