css - 使用 css 嵌入字体

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

不同的浏览器有不同的需求，字体也不异常(exception)。这是一个完整的例子:

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

此外，您需要在您的字体文件夹中设置一个.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(网络字体的新格式提案 文件)；
• Google Chrome 和 iPhone 的 Safari 允许在 @字体脸；