web字体图标

web字体,图标

当我们发现现有的字体,图标无法满足我们时,除了可以通过美工获取,也能够通过互联网获取资源

常见字体格式:

• 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+

web字体

顾名思义 就是使用网上的字体,一般在页面上需要部分使用特殊字体时使用

• 获取网址(包括,但不仅限于此):
  • [iconfont][2]
  • [有字库][3]

• 使用方式:
  • 不同的网站的字体使用可能会略有不同,直接查看网站使用步骤即可

web图标

类似于web字体,web图标是使用网络资源来实现一些简单的图标,避免使用图片进行设置

• 获取网址(包括,但不仅限于此):

  • [iconfont][4]
  • [fontastic][5]
    • 账号:[email protected]
    • 密码:haoyuexing
    • 自己用就好
  • [免费web图标][6]

• 使用方式:

  • 本质就是字体的替换
  • 不同的网站的字体图标使用可能会略有不同,直接查看网站使用步骤即可

兼容性查询

我们可以通过帮助手册查询CSS3的兼容性问题,也能够通过网站caniuse进行查询

• 地址如下:
  [caniuse][2]

• 使用方式:

  • 输入希望查询的样式:比如border-image
  • 属性名正确的情况下,可以找到对应的CSS样式
  • 查看红色不可用,绿色可用,青色的为需要注意