CSS3教程(7):CSS3嵌入字体
互联网 发布时间：2009-04-02 19:36:26 作者：佚名 
我要评论
我要评论网页制作Webjx文章简介：想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！
上一篇：CSS3教程(6):创建网站多列
要使用一款字体，我们首先需要使用‘@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; }
浏览器支持：
- 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…)
相关文章
本篇文章主要介绍了CSS3中字体平滑处理和抗锯齿渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-29- 这篇文章主要介绍了CSS3字体效果的设置方法小结,包括阴影效果、省略号代替以及嵌入字体,需要的朋友可以参考下2016-06-13
- rem是css3新定义的设置字体大小属性,rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,下面就带大家来轻松掌握CSS3中的字体大小单位rem的使用方法:2016-05-24
- CSS3中的font-face可以将我们上传的自定义的字体显示出来,有时比如我们要显示英文音标的字体时便需要用到,本文就整理了一下使用CSS3的font-face字体嵌入样式的方法讲解,需2016-05-13
- 最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的字体阴影——text-shadow的使用方法。2016-01-08
- 今天给大家分享一款纯css3实现的颜色渐变按钮，这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，清新淡雅，效果非常好看，需要的朋友可以参考下2014-11-12
- 这篇文章主要介绍了css3 自定义字体font-face使用，需要的朋友可以参考下2014-05-14
- 传说中的CSS3基本上什么都可以，那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体，下面有个不错的示例，感兴趣的朋友可以了解下2013-09-23
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
今天就从一个简单的圆形菜单的实现，使用CSS3+font字体文件实现圆形菜单，下面来总结一些最近学习的收获，感兴趣的朋友可以参考下哈2013-06-03- 3D字体而且还带有阴影，这种效果想必大家只有认为一些高级的作图工具才可以实现的吧，css3的出现让这一切看似不可能的实现成为可能，接下来为大家介绍下3D字体带阴影效果的2013-03-20
最新评论