提升你设计水平的CSS3新技术[译](8)
作者:暴风彬彬 来源:彬go 发布时间:2009-08-02 20:51:00
7. @font-face属性
尽管是最被期待的CSS3 特性 (甚至它在CSS2中就已经被引入了), @font-face在网站上仍然没有像其它CSS3属性那样被广泛采用.这主要因为字体授权和版权问题:嵌入的字体很容易从网站上下载到,这是字体厂商的主要顾虑。
尽管如此,授权我呢提貌似已经开始解决了。TypeKit 承诺将制定一个方案,以使设计师和字体厂商更容易的统一授权问题,这将显著的充实网站设计中的排版并使@font-face 属性在实际工作中可用。
Mozilla实验室JetPack 网站采用font-face规则来使用DroidSans 字体。
少数使用该属性的网站之一是新上线的JetPack MozillaLabs.
@font-face{
font-family: 'DroidSans';
src: url('../fonts/DroidSans.ttf') format('truetype');
}
要想在你的网站中使用嵌入字体,你必须独立的生命每个样式(比如, normal, bold 和italic)。请确保只使用被授权为使用到网站的字体并在需要的时候给字体的设计师一些表扬。
在定义了@font-face 规则之后,你就可以用普通的font-family 属性来引用该字体了:
p {
font-family: "DroidSans";
}
如果一个浏览器不支持@font-face,它将使用font-family(CSS 字体库)属性中指定的下一个字体。对支持的浏览器来说,如果@font-face 字体是一个奢侈品(只有少数元素用到),这对一些网站是可行的;但是如果该字体在设计中占有一个主要的角色或者是公司的视觉特征的一部分,你就可能想使用其它的解决方案,比如sIFR 或Cufón。尽管如此,请记住,这些工具对标题或较短的文字更适合,复制和粘贴此类内容比较困难而且对用户并不友好。
在网站中使用此类字体不是很好吗?Dave Shea 使用Cufón 和Museo Sans来做的实验。很漂亮!
浏览器支持: @font-face 被Safari 3.1+和chrome支持。Internet Explorer 支持EOT字体。 Opera 10 和Firefox 3.5 将会支持它。
扩展阅读:


猜你喜欢
- pycharm是一款高效的python IDE工具,它非常强大,且可以跨平台,是新手首选工具!下面我给第一次使用这款软件的朋友做一个简单的使
- 前言在Python中,装饰器是一种十分强大并且好用的语法,一些重复的代码使用装饰器语法的话能够使代码更容易理解及阅读。因此在这里简单总结了一
- 从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的5个小技巧就会对你有所帮
- 点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧1、遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的
- 是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。
- 今年4月,我在宿舍憋出一个拖拽翻页效果原本是为自己的博客网站设计的,周二产生的灵感,周三周四逃课两天算坐标,周五回家,到傍晚才算写出了第一版
- python语言最常见的括号有三种,分别是:小括号( )、中括号[ ]和大括号也叫做花括号{ }。其作用也各不相同,分别用来代表不同的pyt
- 写在前面的话:此篇还是asp相关的,相信玩ASP的都有这个感觉,当数据有5万多条时-------just like音乐网,要调用最新的10条
- 本文实例为大家分享了TP3.2批量上传文件或图片的具体代码,并解决了同名冲突问题,供大家参考,具体内容如下1、html<form ac
- 1、 引言小 * 丝:鱼哥,新年快乐!小鱼:无事不登三宝殿,有啥事,你直说吧…小 * 丝:别说的这么直接,这大过年的&
- 最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 da
- 本文实例讲述了django框架自定义用户表操作。分享给大家供大家参考,具体如下:django中已经给我生成默认的User表,其中的字段已经可
- 本文实例讲述了Javascript与PHP验证用户输入URL地址是否正确的方法,分享给大家供大家参考。具体方法如下:1.javascript
- 1.自定义浏览器窗口大小或全屏from selenium import webdriverimport timedriver = webdr
- 本文实例讲述了python使用xlrd实现检索excel中某列含有指定字符串记录的方法。分享给大家供大家参考。具体分析如下:这里利用xlrd
- pygal的安装和简介,大家可以参阅《pip和pygal的安装实例教程》,下面看看通过pygal实现绘制雷达图代码示例。雷达图(Radar)
- 本文实例讲述了Python使用matplotlib 画矩形的三种方式。分享给大家供大家参考,具体如下:假设矩形两点坐标如下,分别为:x1,
- 本文实例讲述了flask框架自定义过滤器。分享给大家供大家参考,具体如下:除了一些内置的join length safe等过滤器外, fla
- 前言django 的 admin 是个非常方便的admin portal,可以根据自己的需要重写.在使用Django自带的admin后台的时
- 关于如何区分艺术和设计的话题总是玄之又玄,并因此引发的争论也有很长一段时间。艺术家和设计师都基于相同的知识基础来创作视觉作品,但他们创作的理