给大家带来CSS进修教程:@font-face网页中显现指定的字体
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?破洛洛文章简介:@font-face是CSS中的一个功效,它同意在网页中显现指定的字体,即便用户的电脑中没有安装该字体。这就意味着计划师和开辟职员能够不必思索web平安字体,如预装在用户电脑中的,Arial、TimeNewRoman、Verdana和Trebuchet等字体。
@font-face是CSS中的一个功效,它同意在网页中显现指定的字体,即便用户的电脑中没有安装该字体。这就意味着计划师和开辟职员能够不必思索web平安字体,如预装在用户电脑中的,Arial、TimeNewRoman、Verdana和Trebuchet等字体。
@font-face的优点:
以后网页计划盛行在网页中的题目、Logo和标题中利用非网页平安字体。这就意味着假如我们利用没有预装在用户电脑的字体时,我们必需利用一些办法来办理这个成绩,如利用背景图片来交换。另有别的如cufon网(http://cufon.shoqolate.com/generate/)上供应的办法。利用@font-face,我们能够制止埋没题目和消费更多工夫往做每张背景图片,只必要在服务端安排一个字体,节俭了工夫和带宽。
利用@font-face
利用@font-face很复杂,你只需复杂地在款式表中包括@font-face的设置,链接字体文件,像链接一张图片一样。
[*]@font-face{
[*]font-family:DeliciousRoman;
[*]src:url(/Delicious-Roman.otf);
[*]}
然后,假如要设置h1中的字体,就像上面的例子:
[*]h1{
[*]font-family:DeliciousRoman,Helvetica,Arial,sans-serif;
[*]}
下面这个例子还利用了后备字体选项,避免@font-face不被撑持。
@font-face的兼容性
IE撑持@font-face已有很多多少年了,而FF(火狐)到3.5版本才撑持,是最初一个支流扫瞄器撑持@font-face。
依据NetMarketShare最新的统计,我们能够失掉起码92%的扫瞄器都撑持@font-face。
以我看来,更高平安级其余扫瞄器都将撑持@font-face,由于很多非IE用户和很多非盛行web扫瞄器被包含在统计内。很多剩上去的8%用户应当是挪动用户。IPhone和iPat一样都撑持@font-face。
@font-face文件的格局
为了满意92%的用户,我们必要参考以下的文件格局:
[*]IE一切版本:EOT
[*]Safari(3.2):TTF/OTF
[*]iPhone(3.1)SVG
[*]Chrome(allversions):SVG(TTF/OTF增加于20101月25日)
[*]Firefox(3.5):TTF/OTF(.WOFF增加于3.6版本)
[*]Opera(10)TTF/OTF
以是,.eot.ttf大概.otf.svg.woff是最好的兼容组合。
</p>
现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。 所见则所得网页编辑器的优点就是直观性,使用方便,容易上手. 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。 HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器) 学Dreamweaver技术的过程其实是一个增加信心的过程。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
页:
[1]