Question

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

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

Answer 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文件 @字体面;

字体嵌入与CSS

1 个答案: