@font-face

语法:

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

<fontsrc> = <url> [format(<string>)]

取值:

<identifier>
字体名称
<url>
此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
<string>
此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype, opentype, embedded-opentype, svg等
<font>
定义字体相关样式

说明:

设置嵌入HTML文档的字体。
  • 需要兼容当前的主流浏览器,需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
  • 嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
  • .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
  • 未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
  • 示例:使用一个全浏览器兼容的自定义字体

    代码如下:

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

    你需要同时提供4种格式的字体

兼容性(同时支持.woff,.ttf,.otf,.svg格式的版本将被视为完全实现该属性):

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Safari Chrome Opera
6.0-8.0 #2 #3 #4 4.0-34.0 #1 #4 4.0-5.0 #1 #3 4.0 #1 #3 15.0 #1
9.0-11.0 #2 #4 5.1 #1 5.0 #1
  1. 不支持支持微软自有的.eot(Embedded Open Type)格式
  2. 不支持ttf和otf格式(IE9+部分支持)
  3. 不支持woff格式
  4. 不支持svg格式(这里单指svg fonts,非svg技术)

示例: