仓酷云

标题: 来一发CSS3教程:利用@font-face完成本性化字体 [打印本页]

作者: 只想知道 时间: 2015-1-15 22:53
标题: 来一发CSS3教程:利用@font-face完成本性化字体
结构清晰，容易被搜索引擎搜索到，天生优化了seo

破洛洛文章简介：我们常常能看到外洋的一些团体网站利用了十分大度的字体，而这些字体一般在用户的电脑中是没有安装的，以是用font-family属性就没法完成了，明天我们就先容利用@font-face完成本性化字体。
在网页中，我们能够用CSS的font-family属性来界说字体，但是界说的字体在用户的电脑上可否准确出现则要看用户的电脑是不是安装了该字体。我们常常能看到外洋的一些团体网站利用了十分大度的字体，而这些字体一般在用户的电脑中是没有安装的，以是用font-family属性就没法完成了，明天我们就先容利用@font-face完成本性化字体。CSS3@font-face

　　说@font-face是CSS3的新特征其实不正确，由于CSS2就已撑持了这一特征，而且InternetExplorer早在第5版的时分就已撑持它了，不外IE完成体例是经由过程自有的eot(EmbededOpenType)字体魄式，别的扫瞄器都不撑持这个格局。@font-face撑持以下属性：
　　font-family：设置文本的字体称号。
　　font-style：设置文本款式。
　　font-variant：设置文本是不是巨细写。
　　font-weight：设置文本的粗细。
　　font-stretch：设置文本是不是横向的拉伸变形。
　　font-size：设置文本字体巨细。
　　src：设置自界说字体的绝对路径大概相对路径。
　　@font-face扫瞄器兼容性以下：

3.5+

3.1+

10+一个复杂例子

　　先声明一个名为ChantelliAntiquaRegular的字体，有一种老的写法是如许的：
@font-face{font-family:"ChantelliAntiquaRegular";src:url("Chantelli_Antiqua-webfont.eot");src:local("☺"),url("Chantelli_Antiqua-webfont.woff")format("woff"),url("Chantelli_Antiqua-webfont.ttf")format("truetype"),url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc")format("svg");font-weight:normal;font-style:normal;}　　第一个src是兼容IE，第二个src是兼容别的扫瞄器。local("☺")是一种hack写法，制止从客户端加载字体，这类写法在Android体系中有BUG，感乐趣的同砚可见《BestPracticeFor@Font-FaceCSSTakesATurn》，改善计划是声明两个@font-face，以下：
@font-face{font-family:"ChantelliAntiquaRegular";src:url("Chantelli_Antiqua-webfont.eot");}@font-face{font-family:"ChantelliAntiquaRegular";src:url(//:)format("no404"),url("Chantelli_Antiqua-webfont.woff")format("woff"),url("Chantelli_Antiqua-webfont.ttf")format("truetype"),url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT")format("svg");font-weight:normal;font-style:normal;}　　我们起首声明一个援用eot字体文件的@font-face，以确保它在IE中能一般事情，第二个@font-face援用了多个字体魄式是为了兼容别的扫瞄器，它们将按按次查找，直到找到撑持的格局，这意味着统一个字体必要有多个格局。url(//:)format("no404")是一种Bulletproof写法，感乐趣的同砚可见《New@Font-FaceSyntax:Simpler,Easier》一文。
　　别的的HTML和CSS代码以下：
.font-face-display{font:66pxChantelliAntiquaRegular,Helvetica,sans-serif;}<divclass="font-face-display">Takemetoyourheart</div>　　最重效果以下：
　　

收费字体网站FontSquirrel

　　FontSquirrel是一个十分优异的收费字体资本网站，搜集了良多高品德字体供网页计划者收费下载，另有个字体魄式天生工具@font-facegenerator，上传一个字体文件，能够天生多种字体魄式及CSS代码，十分有效。假如你必要一些优异的收费英笔墨体，这是个好去向。
　　

　　想要丰厚多彩的页面就必要有更多的字体款式，人们想出了良多字体替换计划，除@font-face计划外另有sIFR、Cufon、Typeface.js等，另有.webfont，复杂说，.webfont就是在字体中嵌进了会见允许表，扫瞄器能够读出这些允许信息，并决意是不是应当下载和衬着这些字体。别的另有Typekit也是一种值得存眷的计划，将字体放在第三方服务器上供挪用。这些计划的优弱点，将会在今后做具体的先容。
</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

作者: 山那边是海 时间: 2015-1-17 19:30
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 金色的骷髅 时间: 2015-1-24 20:10
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 透明 时间: 2015-2-2 14:37
可以使用 CSS 检查工具进行设计。

作者: 仓酷云 时间: 2015-2-8 01:17
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 小女巫 时间: 2015-2-24 05:20
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 乐观 时间: 2015-3-7 11:54
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 深爱那片海 时间: 2015-3-21 22:01
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

欢迎光临仓酷云 (http://ckuyun.com/)