热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于CSS3@fontface的一些资源分享

关于CSS3@font-face规则:在CSS3之前,web设计师必须使用已在用户计算机上安装好的字体。通过CSS3,web设计师可以使.用他们喜欢的任意字体。当您您找到或购买

关于 CSS3 @font-face 规则:

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3,web 设计师可以使.用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType
Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded
OpenType)。

注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

应用范围:

虽然由于中文字体太过庞大,无法大范围的使用,但英文字体和个别中文logo字体已经可以随心所欲的应用在网站上了。

还有已经流行了一段时间的字体图标。

兼容性:

虽然目前对于@font-face的支持,IE只兼容到IE9+,但使用兼容方案,可以兼容到IE7。

相关资源:

只介绍两个比较主要的:

IcoMoon:

这是个牛叉到必须膜拜的网站,因为实在太贴心了。在这里可以选择图标生成字体,生成后的压缩包中不但包含.ttf .eot
等用到的各种格式的字体文件,还包含包括HTML和CSS以及兼容IE7的JS的示例DEMO。

你只要照本宣科的把DEMO中的代码移植到你项目中就可以了。

这个网站还支持导出不同尺寸的png图标,唯一遗憾的是因为要支持字体图标,所有的图标都是扁平纯色风格的。

Google
Fonts

这个就很经典了,上一个主要是字体图标,这个就是字体了。这是google的在线字体库,在这里找到喜欢的字体,用在项目中,就这么简单。


推荐阅读
author-avatar
海蓝透了我的心
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有