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开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
html粘性页脚的具体使用
Jan 18 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP文件读写操作之文件写入代码
2011/01/13 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
解析Python中的异常处理
2015/04/28 Python
Python作用域用法实例详解
2016/03/15 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python matplotlib画图实例代码分享
2017/12/27 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
yy结婚证婚词
2014/01/10 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
四风存在的原因分析
2014/02/11 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
优秀志愿者感言
2015/08/01 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python