web字体和字体图标的使用

2019独角兽企业重金招聘Python工程师标准>>>

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可以使用简单的代码就实现特别多的效果呢，赶紧试一试吧！

转载于:https://my.oschina.net/yxmBetter/blog/831119