CSS3教程(7):CSS3嵌入字体


Posted in HTML / CSS onApril 02, 2009

想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧!
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧!
上一篇:CSS3教程(6):创建网站多列
要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。
尽管这样,让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了,但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。
如果你手上没有字体文件,你可以在dafont.com下载一些。
跨浏览器兼容性
目前只有Safari支持@font-face特性(Google Chrome开发版 2.0.156 也支持这个特性)。
注意,你的浏览器需要一些时间加载字体文件,所以,就目前来说,使用图片文件而不是CSS样式的用户体验会更好些。 CSS3嵌入字体
CSS3教程(7):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的地方使用阴影效果。
CSS3教程(7):CSS3嵌入字体
.fontFaceShadow{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; text-shadow: 3px 3px 7px #111; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )(IE7 支持eot格式的字体文件)
  • Opera(9.6 …)(支持文字阴影)
  • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 #HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
You might like
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
小学毕业感言300字
2014/02/19 职场文书
财务总监管理职责范文
2014/03/09 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android