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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
使用CSS实现音波加载效果
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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php google或baidu分页代码
2009/11/26 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
JavaScript 的继承
2011/10/01 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
jQuery事件对象总结
2016/10/17 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
资产评估专业大学生求职信
2013/09/29 职场文书
学习心理学的体会
2014/11/07 职场文书
六年级学生期末评语
2014/12/26 职场文书
党支部考察意见范文
2015/06/02 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript