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

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

CSS3实现首字下沉  

2012-02-08 22:50:51|  分类: 样式案例 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

查看实现效果:http://jsfiddle.net/hszy00232/K2rCL/1/

这个案例涉及到2个知识点:

1.如何实现首字下沉

.container div:first-letter {
    floatleft;
    font-size80px;
    line-height1;
    margin15px 5px 0;
    text-transformuppercase;
}

2.@font-face的使用(自定义字体)

@font-face {
    font-familycelticmd;
    srcurl("http://www.script-tutorials.com/demos/201/css/celticmd.ttf"format("truetype");
}

-------------------------------------------------------------------------------------------------

分隔线

-------------------------------------------------------------------------------------------------

@font-face的介绍使用

简介:它允许你在网页上显示一个自定义的字体。即使客户机器上可以没有安装这种字体,网页也可以显示。

语法:

@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*;   [font-weight: <weight>];   [font-style: <style>]; }

取值:

<a-remote-font-name>:指定字体名称

<source>:指定字体路径使用绝对或相对地址

案例:View live sample

<html> <head> <title>Web Font Sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }  body { font-family: "Bitstream Vera Serif Bold", serif } </style> </head> <body> This is Bitstream Vera Serif Bold. </body> </html>

注意:需要注意的是Gecko浏览器字体需要和样式文件在同域下。可以通过HTTP access controls放松这一限制

@Font-face目前浏览器的兼容性:
  • Webkit/Safari(3.2+):TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);
  • Opera (10+): TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);
  • Internet Explorer: 自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;
  • Firefox(3.5+): TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
  • Google Chrome:TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。

@Font-face 让所有浏览器都兼容的方法:

有一个专门用于@font-face 的字体网站:http://www.fontsquirrel.com/fontface/generator

fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具,可以生成不同的字体格式,并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供 的一些字体,也可以上传你自己的字体还是用。

 

参考资料:

  1. https://developer.mozilla.org/en/CSS/@font-face
  2. http://www.xunzou.com/blog/post/621.html 
  评论这张
 
阅读(1300)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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