字体嵌入与CSS

时间:2012-05-03 09:55:06

标签: css fonts

我正在尝试使用下面的CSS导入字体,它适用于Firefox和IE,但不支持Chrome。你能帮我把它在Chrome中运行吗?

@font-face {
    font-family: "Fontin-Bold";
    src: url(fonts/Fontin-Bold.ttf);
    src: url(fonts/Fontin-Bold.eot);
}

1 个答案:

答案 0 :(得分:1)

不同的浏览器有不同的需求,字体也不例外。这是一个完整的例子:

<强> CSS

@font-face {
    font-family: 'UbuntuBold';
    src: url('ubuntu-bold-webfont.eot');
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-bold-webfont.woff') format('woff'),
         url('ubuntu-bold-webfont.ttf') format('truetype'),
         url('ubuntu-bold-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

您最好使用像Font Squirrel

这样的字体生成器

此外,您需要在fonts文件夹中使用以下类型设置 .htaccess

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

<强>编辑:

为了更好地解释不同的字体格式 VS 不同的浏览器

  • Firefox和Safari支持TTF或OTF格式;
  • Internet Explorer支持EOT格式;
  • Firefox 3.6支持新的WOFF(网络字体的新格式提案) 文件);
  • 谷歌浏览器和iPhone的Safari允许使用SVG文件 @字体面;