web字体和图标

web字体和图标

• 介绍
  • 开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代已经过去。而且它的支持程度很好，甚至低版本ie也能支持
• 字体格式：不同浏览器所支持的字体格式不一样
  • .ttf格式：是windows和mac最常见的字体，是一种RAW格式，支持这种字体的浏览器有ie9+，fixfox3.5+，chrome4+，safari3+，opera10+
  • .otf格式：被认为是一种原始的字体，其内置在TureType的基础上，支持这种字体的浏览器有firefox3.5+，chrome4.0+，safari3.1+，opera10.0+
  • .woff格式：是web字体中的最佳格式，它是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有ie9+，firefox3.5+，chrome6+，safari3.6+，opera11.1+
  • .eot格式：是ie专用字体，可以从TrueType上创建此字体，支持这种格式的浏览器有ie4+
  • .svg格式：是基于SVG字体渲染的一种格式，支持这种字体的浏览器有chrome4+，safari3.1+，opera10.0+
• web字体使用注意
  • 要自定义想要生成对应字体的文件内容，即只有自己指定的文字才有web字体样式（可以用阿里巴巴矢量图标库）
  • 使用网络资源生成web字体
• 字体图标
  • 介绍
    • 本质上是文字，但是显示出来是图标
    • 常见的是把网页常用的一些小图标，借助工具帮我们生成一个字体包，然后就可以像文字一样使用了
  • 优点
    • 将所有图标打包成字体库，减少请求
    • 具有矢量性，可保证清晰度
    • 使用灵活，易于维护
  • 生成字体图标文件
    • 下载字体图标文件，如：http://www.awesomes.cn的网站介绍和使用
  • 注意点
    • 由于直接在html中写unicode编码不直观，所以常常使用伪元素将字体图标打包成css样式，然后直接在html中通过class调用就可以了，不过在伪元素的content属性中写字体图标对应的unicode编码时需要省略一些字符（需要省略成\e641）。这样写的另一个好处是可以为每一个字体图标指定不同的样式