通过css的@font-face属性，在网页上显示用户电脑没有的字体
分类：网页设计 Tags： css 字体 评论：1 浏览：9112 最近更新时间：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）
-
• 如何去掉网页的横向滚动条，竖向滚动条？
• Fireworks中如何让网页的字体更清晰的解决方法！（图）
• Godaddy windows Plesk新主机不支持aspjpeg、jmail组件
• VB6将ASP编译封装成DLL教程
• Google Apps免费版企业邮箱将不再接受任何申请注册
• Div+CSS网页布局入门实例教程一、二(图)
• Access数据库转SQL Server2000数据库的方法及经验总结
• GoDaddy Windows主机客户端显示详细错误信息代码
• 兼容IE和Firefox火狐的DIV垂直居中及容器内图片垂直居中的CSS代码
• 域名续费期和高价赎回期
