WEB 字体

1 嵌入Web字体

1.1 什么是Web字体

  • 可以把字体放置在服务器上,而不受制于客户端系统字体
  • 浏览器会根据指定的命令将对应的字体下载到本地缓存
  • 1998年@font-face加入到css2中, 但css2.1中又被移出,css3重新加入
  • IE兼容性极好

1.2 @font-face语法

格式

@font-face { 
    font-family: <identifier>; 
    src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*; 
    [<font>];
 }

相关参数

  • identifier 字体名称

  • url 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径

  • string 字体的格式,主要用来帮助浏览器识别, format(fontType)

1.3 标准写法(兼容)

@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9兼容模式 */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
         url('diyfont.woff') format('woff'), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

/*使用*/
.box {
    font-family: "diyfont";
}

1.4 各种字体格式的兼容性情况(附)

  • truetype .ttf

    Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+

  • opentype .otf

    Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+

  • Web Open Font Format .woff

    Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+

  • embedded Open Type .eot

    IE4+

  • svg .svg

    Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+

2 字体工具

2.1 web字体定制

2.2 web字体转换

3 字体图标

3.1 使用字体图标的优势

  • 相比位图更加清晰
  • 灵活性高,更方便改变大小、颜色、风格等
  • 兼容性好,低版本IE也支持

3.2 常用的字体图标库

3.3 字体图标制作工具

results matching ""

    No results matching ""