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

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

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 允许在 @font-face 中使用 SVG 文件；