我的联盟 作品 招聘 外包 人才  酷站加油 国内 国外 CSS  资源图库 图库 模板 矢量 图标  设计欣赏 界面 LOGO 插画 艺术  网页 平面  专访 名站 竞赛 社区
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
CSS3+HTML5 实现未来Web设计
来源:蓝色理想 作者:comsharp 2010年01月27日 15:01 网友评论:1条 点击:
5. 使用 @Font-Face 实现定制字体

Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 – 译者),现在,使用 CSS3 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 – 译者)。

语法如下:

        @font-face {
        font-family:'Anivers';
        src: url('/images/Anivers.otf') format('opentype');
        }
  • 支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE )
  • 用例: TapTapTap.

请参阅:

虽然 CSS3 尚在开发中,上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。

Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。

Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。

根据统计数据,2008 年11月止,44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味着 CSS3 的部分功能已经可以支持近半 Internet 用户,而在 Web 设计圈子,这个比例可能更高,大约有 73.6% (Blog.SpoonGraphics 提供的数据)

6. 负面因素

上面讲述的这些 CSS3 功能会给你的网站带来出色的效果,但仍有一些负面的因素必须考虑:

  • Internet Explorer: 46% 的 Internet 无法看到这些效果,因此不要将这些东西用于重要的设计。同时保证,在这些效果不起作用的地方,有替代设计可用。
  • CSS 验证问题: 这些 CSS3 功能并非最终版本,目前不同的浏览器使用不同标签实现这些功能,可能为你的 Style Sheet 带来验证上的问题。
  • 臃肿代码: 因为不同浏览器要使用不同定义语法,最终将导致你的 CSS 代码十分臃肿。
  • 不当的使用: 对这些效果的不当使用,可能带来一些不良后果,阴影效果尤其如此。

英文原文:Push Your Web Design Into The Future With CSS3
中文翻译:comsharp

首页 上一页 [1] [2] [3] 下一页 尾页
上一篇:说说渐进式增强   下一篇:玩转CSS3色彩
收藏此页】【打印】【关闭
 相关文章  我要点评
·波兰layaweek web设计作品(十五)
·埃及ahmedelzahra web设计作品(二)
·Tehacesequence精彩WEB设计(十八)
·浅谈游戏WEB设计的一些细节问题
·Web设计师能从游戏中学到些什么
·秘鲁krisalva web设计作品(二)
·波兰layaweek web设计作品(十四)
·波兰layaweek web设计作品(十三)

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 设计服务 | 广告服务 | 常见问题 | 网站地图 | 法律声明 | 联系我们
Copyright © 2003-2012 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】