一些惊艳的 CSS3 之二

接上一篇文章《一些惊艳的 CSS3 之一》

三. 多重背景

多重背景并没有使用新增的 CSS3 属性,而是在我们都很熟悉的 background-image 作出调整,支持同时使用多个图片,例如:传统来说,为元素设置背景图会像如下设置:

#demo {background: url(bg1.png) no-repeat; }

bb

但是在 CSS3 中,设计师可以同时为一个元素指定多个背景,例如:

#demo {background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat left bottom, url(bg3.png) no-repeat right top; }

mb

四. 嵌入字体类型

对于一个出色的网页,字体的选择是相对关键的,无奈设计师必须考虑用户的本地端是否有相应的字体,因此设计常常只能使用一些较为大众化的常见字体,而舍弃更加适合的字体。在 CSS3 中,这一情况将可以改变。CSS3 中引入了 font-face(嵌入字体类型),实验 font-face 可以把需要的字体上传到自己的服务器,再在服务器的网页中使用该字体并显示出来,无论浏览网页的用户的本地端是否有该字体。

这无疑是个很棒的功能,例如下面的效果:

font-face

部分文字使用了用 font-face 引入的字体,代码如下:

@font-face {
    font-family: 'vanessalovesyoumedium';
    src: url('vanessalovesyou-webfont.eot');
    src: url('vanessalovesyou-webfont.eot?#iefix') format('embedded-opentype'),
         url('vanessalovesyou-webfont.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}
#test-font {
	font-size: 24px;
}
#test-font span{
	font-family: vanessalovesyoumedium;
}

使用 @font-face 定义字体所需要的文件,为了兼容各个浏览器,需要使用多种不同的字体格式,建议至少要有 .eot 和 .ttf 两种格式,.eot 用于 IE5+ ,.ttf 用于 Chrome 等现代浏览器,另外 .otf 也是不错的选择,也可以用于现代浏览器。

浏览器支持如下:

Chrome 2.0.156+、Firefox 3.05+、Safari 3.2.1+、Opera 11.50+、IE5+

需要注意以下几点:

  • IE8及更早浏览器只支持微软自有的 .eot 格式
  • IE9.0-10.0部分支持 ttf 和 otf 字体格式
  • 现代浏览器大多支持 .ttf 和 .otf 两种格式
  • 现代浏览器需要从外部引用 @face-font 才能有效,IE 则可以直接在页面中使用 @face-font

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/amazing-css3-part-two.html

评论列表

  • 评论者头像
    回复

    吃完点心回来抢沙发~欧也~ :roll:

  • 评论者头像
    回复

    字体是个好东西

    • 评论者头像
      回复

      @傅小黑 内嵌字体是CSS3中我觉得最酷的,而且连 IE 都支持,也很实用!

  • 评论者头像
    回复

    多重背景貌似不太用到

    • 评论者头像
      回复

      @airoschou 支持度比较底,暂时还是很少用到,只能展望以后了!

    • 评论者头像

      Schwestern, an die Plattenteller! Br??der, auf den Dancefloor! Feiert die Missy! Am 15.11.2008 ab 20:30 im Westwerk, Admiralit?¤tsstr. 74, Hamburg. Mit *Tschilp live, DJ T-Ina Darling (Femmes with Fatal Breaks/Berlin) & Deneh (WobWob/Hamburg). (tags: missy zeitschrift hamburg party feminismus)

  • 评论者头像
    回复

    报告:去css1的链接出现了404 :-P

  • 评论者头像
    回复

    不错学习啦,呵呵

  • 评论者头像
    回复

    @font-face 貌似 css 2就可以用了!

    • 评论者头像
      回复

      @一路彷徨 是的,早在CSS2和IE5中,就已经支持 @font-face,但是一直不被重视,直到CSS3才重新制定标准并推广!

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O