注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

@font-face  

2011-11-09 14:22:01|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

font-face

语法:

@font-face :{属性: 取值;}

 

取值:

font-family:

设置文本的字体名称。

font-style:

设置文本样式。

font-variant:

设置文本是否大小写。

font-weight:

设置文本的粗细。

font-stretch:

设置文本是否横向的拉伸变形。

font-size:

设置文本字体大小。

src

设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。

 

说明:

@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

关于 Web 字体:现状与未来

请注意,除了SAFARI支持TTF格式外,其他浏览器不支持的。请转换成EOT格式的,转换可以参考下篇文章

用Microsoft WEFT工具制作EOT字库,让网页字体轻松秀出来

例(请大家自己转换EOT格式的字体):

CSS部分

@charset "utf-8";
/* CSS Document */
*{
    padding:0;
    margin:0;
}
@font-face:{
    font-family:"hytj";
    src:url(hytj.EOT);
}
body{
    font-size:12px;
    color:#333;
}
.wrapper{
    width:200px;
    margin:0 auto;
}
.wrapper ul{
    width:100%;
    padding:20px;
    overflow:hidden;
}
.wrapper ul:nth-child(1){
    font-family:"hytj";
    font-size:24px;
}

HTML部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>font-face</title>
</head>

<body>
<div class="wrapper">
    <ul>汉仪太极简体</ul>
</div>
</body>
</html>

  评论这张
 
阅读(147)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017