web字体
- 开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体。
- 支持程度比较好,甚至IE低版本浏览器也能支持。
- 不同浏览器所支持的字体格式是不一样的。
- TureTpe(.ttf)格式
- .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
- OpenType(.otf)格式
- .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
- Web Open Font Format(.woff)格式
- woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
- Embedded Open Type(.eot)格式
- .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;
- SVG(.svg)格式
- .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
- 我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。(找字网、有字库)查找更多中文字体。
字体图标
- 把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。
- 优点
- 将所有图标打包成字体库,减少请求;
- 具有矢量性,可保证清晰度;
- 使用灵活,便于维护;
- 可以尝试
- Font Awesome
- 定制自已的字体图标库:iconfont、icomoon
- SVG素材:ICONSVG
CSS3兼容性
通过CSS3兼容性可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。
注意点
- font-family后面的字体是用户本地电脑上存在的字体,可在c盘windows中的fonts文件夹可以找到,如果没有,默认为宋体。局限性:用户必须安装特定字体。
- 使用web字体步骤:
- 在上述网址中(找字网等)下载某种字体;(下载后输入他的后缀:.zip)
- 引入字体:在style标签中,声明一个自定义字体;
- 在下载的demo文件中找到对应的设置复制就形成了src(兼容多种浏览器)。
- format告诉浏览器使用指定的格式渲染。
- @font-face{ font-family:'itcast';src: }
- 使用上述自定义的字体名称
- body{font-family:'宋体',itcast;}(注意,中间用逗号)
- 注意:下载的文件中只是生成了一部分,由于字体库较大,一般将要设置的字体在网址中复制生成下载即可,无需全部下载所有的汉字文件,会造成资源浪费。
- 使用字体图标步骤:
- 一个类名对应一个小图标。
- 在某文件夹中放入css和font文件夹(只需要这两个文件),在style标签中写link引入css文件中某一个,然后写标签里添加类(类名为css中找某一个字体:icon-adjust等)即添加了一个小图标,可以在css中设置其属性,和字体设置一样。
- 生成自定义的字体图标:http://iconfont.cn/
- 通过该网站将.svg格式的图片可以转换成字体图标。
- 使用ai将整张图片中小图片修改成svg格式(使用专门做矢量图的软件比如ai)
- transitionEnd:该事件表示元素过渡完成后触发,但是有兼容问题,可以写-webkit-transitionEnd;
- scroll:滚动条事件
- mousewheel:滚轮事件(不需要滚动条)
- 滚轮事件存在一定的兼容性,解决:名称不一样:firefox:DOMMouseScroll;
- 全屏滚动插件:使用插件兼容:fullpage.js
CSS3可以使用简单的代码就实现特别多的效果呢,赶紧试一试吧!