一些惊艳的 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 发表,本文链接:https://kayosite.com/amazing-css3-part-two.html

评论列表

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail