Html 如何在CSS中使用外部字体?

Html 如何在CSS中使用外部字体?,html,css,google-chrome,firefox,font-face,Html,Css,Google Chrome,Firefox,Font Face,我有一个HTML页面,它使用了字体Tarminis。此字体安装在“我的windows字体”文件夹中。因此,如果我用Chrome打开页面,页面将按预期呈现。然而,如果我用Firefox打开页面,它的编码就不正确 所有数据如下: 不知何故,Firefox(也是Opera)无法对括号中的文本进行编码。所以我想做的是把这个字体和我的网页放在同一个文件夹里,然后从那里加载。我一直在尝试使用CSS@font-face功能,但没有成功 那么,我如何强制我的网页使用字体Tarminis作为外部字体而不是系统字体

我有一个HTML页面,它使用了字体Tarminis。此字体安装在“我的windows字体”文件夹中。因此,如果我用Chrome打开页面,页面将按预期呈现。然而,如果我用Firefox打开页面,它的编码就不正确

所有数据如下:

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


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

它应该像

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

如果字体许可证允许web嵌入,则可以使用生成所有必要的文件,这些文件也适用于较旧的浏览器


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

为了补充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 */
}
可能重复的