如何在CSS中使用外部字体？

Question

我有一个使用字体Tarminis的HTML页面。这个字体已经安装在我的Windows字体文件夹中。所以如果我用Chrome打开页面，页面将按预期渲染。但是，如果我使用Firefox打开页面，则无法正确编码。

所有数据都在此处：https://dl.dropbox.com/u/72276354/snowbank.zip

某种原因，Firefox（还有Opera）不能对括号中的文本进行编码。所以我想做的是将这个字体放在我的网页相同的文件夹中，并从那里加载它。我一直在尝试使用CSS的@font-face功能，但没有成功。

那么，如何强制我的网页使用Tarminis字体作为外部字体而不是系统字体？

- Nerimantas Gruodis

---

可能是 使用 CSS 使用自定义字体？ 的重复问题。 - animuson

Answer 1

这应该很简单：

@font-face {
        font-family: "Name of your font";
        src: url(name-of-font.ttf);
}
* {
    font-family: "Name of your font";
}

- dockeryZ

Answer 2

补充一下Zane的回答，浏览器/平台在渲染字体时往往存在兼容性问题，因此最好的使用方式是提供多种格式，就像这样：

@font-face {
    font-family: 'Name of font';
    src: url('font.eot') format('embedded-opentype'); /* IE9 Compat Modes */
    src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('font-webfont.woff') format('woff'), /* Modern Browsers */
     url('font.ttf') format('truetype'), /* Safari, Android, iOS */
     url('font-webfont.svg#levenim') format('svg'); /* Legacy iOS */
}

- Ruben Martinez Jr.

Answer 3

如果字体的许可证允许网络嵌入，您可以使用fontsquirrel生成器生成所有必要的文件，这也适用于旧版浏览器。

它还提供了一个带有所有必要CSS代码的工作示例。

- Marcel Gwerder