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

Question

我有HTML页面使用字体Tarminis.此字体安装在我的Windows字体文件夹中.因此,如果我使用Chrome打开该页面,页面将按预期呈现.但是,如果我用Firefox打开页面,它编码不正确.

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

不知何故,Firefox(也是Opera)无法在括号中对文本进行编码.所以我想做的是将这个字体与我的网页放在同一个文件夹中并从那里加载它.我一直在尝试使用CSS @font-face功能,但没有运气.

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

Answer 1

它应该如此简单

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

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 */
}