CSS3系列教程:嵌入字体/网络字体
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧!
要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。
尽管这样,让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了,但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。
如果你手上没有字体文件,你可以在dafont.com下载一些。
跨浏览器兼容性
目前只有Safari支持@font-face特性(Google Chrome开发版 2.0.156+也支持这个特性)。
注意,你的浏览器需要一些时间加载字体文件,所以,就目前来说,使用图片文件而不是CSS样式的用户体验会更好些。
CSS3嵌入字体
上面的效果可由下面的样式实现:
@font-face { font-family: qianduanNet; src: url("SketchRockwell.ttf"); } .fontFace{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; }
我们也可以对使用font-face的地方使用阴影效果。
.fontFaceShadow{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; text-shadow: 3px 3px 7px #111; }
【CSS3系列教程:嵌入字体/网络字体】相关文章
2. HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
5. CSS3系列教程:阴影
8. CSS3系列教程:透明度
本文来源:https://www.51html5.com/a776.html
上一篇:CSS3 HTML5实例一(圆角)
下一篇:Css3名字空间 @namespace
﹝CSS3系列教程:嵌入字体/网络字体﹞相关内容
- 视频教程:CSS3动画属性实用技巧教程
- 任天堂:Wii U嵌入浏览器支持HTML5 不支持Flash
- Box收购HTML5文档嵌入服务商Crocodoc
- jQuery/CSS3经典按钮系列插件
- CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)
- 使用CSS3 @font-face实现个性化字体
- phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...
- 解析中文字体在CSS中的表达方式
- HTML5、CSS3应用教程之 跟DIV说Bey!Bey!
- CSS3教程:background-clip和background-origin