通过css的@font-face属性，在网页上显示用户电脑没有的字体
分类：网页设计 Tags： css 字体 评论：1 浏览：9474 最近更新时间：2014/8/23 13:25:21
在网页中，我们可以用CSS的font-family属性来定义字体，然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，所以用font-family属性就无法实现了。
字体应用是网页设计中不可或缺的一部分。经常地，我们盼望在网页中应用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在涉猎页面的时候就 有可能看不到真实的设计。美工设计师最常做的措施是把想要字体应用是网页设计中不可或缺的一部分。经常地，我们盼望在网页中应用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在涉猎页面的时候就 有可能看不到真实的设计。美工设计师最常做的措施是把想要的文字做成图片，这样做有几个明显 缺点：1. 不可能大领域的应用该字体；2. 图片内容相对应用文字不易修正；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为确定 网页内容相关性的有效因素）。网络上有一些应用 sIFR技巧、或 javascript/flash hack的法子 ，但实现起来或繁琐，或有缺点。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。
CSS3 @font-face
说@font-face是CSS3的新特性并不准确，因为CSS2就已经支持了这一特性，并且Internet Explorer早在第5版的时候就已经支持它了，不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式，其它浏览器都不支持这个格式。@font-face支持如下属性：
font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向的拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径。
示例代码：
body {font-family:'微软雅黑'}
@font-face {
font-family:微软雅黑;
src: url('微软雅黑.eot'); /* IE9 Compat Modes */
src: url('微软雅黑.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('微软雅黑.woff') format('woff'), /* Modern Browsers */
url('微软雅黑.ttf') format('truetype'), /* Safari, Android, iOS */
url('微软雅黑.svg#微软雅黑') format('svg'); /* Legacy iOS */
}在页面中需要 的处所应用该字体：
h1{font-family: '微软雅黑';}怎么把字体文件转换成.eot？可以通过网页版转换工具进行转换，
http://ttf2eot.sebastiankippe.com（转换.eot）
http://www.kirsle.net/wizards/ttf2eot.cgi（转换.eot）
http://www.fontsquirrel.com/fontface/generator（格式全，支持转换.eot .woff .ttf .svg）
-
• 林子大了什么鸟都有，各位站长请注意你们的代码安全
• 解决XP系统IIS5.0 报Server Application Error错误方法，亲自测试可用
• 如何让网站”HTTP 500内部服务器错误“显示为具体的错误信息？
• CSS按比例缩放图片代码
• 如何有效防止网站出现垃圾留言,垃圾评论?
• 不错的photoshop样式免费下载，asl格式，Web2.0风格导航条与按钮效果
• 点击一个超级链接,能同时打开两个网页/网站的代码
• 通过css代码做Table表格隔行变色效果
• EASEUS Partition Master 5.0.1 Unlimited Edition无损磁盘分区调整工具教程
• Div+CSS网页布局入门实例教程三(图)
