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实现的响应式导航
Oct 31 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php实现json编码的方法
2015/07/30 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue如何将v-for中的表格导出来
2018/05/07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
精彩的大学生自我评价
2013/11/17 职场文书
爱情保证书大全
2014/04/29 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
体育教师研修感悟
2015/11/18 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
区域销售大会开幕词
2016/03/04 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
python中对列表的删除和添加方法详解
2022/02/24 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL