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

【问题标题】：How to use external font in CSS?如何在 CSS 中使用外部字体？
【发布时间】：2013-03-14 04:51:34
【问题描述】：

我的 HTML 页面使用字体 Taminis。此字体安装在我的 windows 字体文件夹中。因此，如果我使用 Chrome 打开页面，页面将按预期呈现。但是，如果我用 Firefox 打开页面，它的编码不正确。

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

不知何故，Firefox（也是 Opera）无法将文本编码到括号中。所以我想做的是把这个字体和我的网页放在同一个文件夹中，然后从那里加载。我一直在尝试使用 CSS @font-face 功能，但没有成功。

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

【问题讨论】：

Using custom fonts using css?的可能重复

标签： html css google-chrome firefox font-face

【解决方案1】：

应该这么简单

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

【讨论】：

【解决方案2】：

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

它还为您提供了一个包含所有必要 css 代码的工作示例。

【讨论】：

【解决方案3】：

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

【讨论】：