自定义字体不显示

Question

尝试定义自定义字体：

@font-face {
font-family: Helvetica Light; src:url('/font/Helvetica-Light.otf');
font-family: Helvetica Oblique; src:url('/font/Helvetica-BoldOblique.otf');
font-family: Helvetica Oblique; src:url('/font/Helvetica-LightOblique.otf');    
font-family: Helvetica Neue; src:url('/font/HelveticaNeueLTStd-ThEx.otf');
font-family: Helvetica Oblique; src:url('/font/Helvetica-Oblique.otf');
}

我正在呼唤它：

h1 {
    font-family: Helvetica Neue;
}

h2 {
    font-family: Helvetica Oblique;
    font-weight:bold;

}

.input {
    font-family: Helvetica Oblique;
    font-weight: light;
}

但它没有显示，我在这里做错了什么？我做了一些谷歌搜索，我可以看到在FF和IE中应该支持OTF吗？

Answer 1

一个font-face只能创建一个自定义字体。 '或"并不重要。无论如何它会工作。但我会建议你使用它们，因为不使用它们对我来说似乎有点不自然。

编辑：您应该使用'名称中的font-family和url s，就像第一个名称一样

@font-face {
    font-family: 'Helvetica Light';
    src:url('/font/Helvetica-Light.otf'); /* will work even without ' or " */
}                                         /* but still! use ' dont remove them */

@font-face {
    font-family: Helvetica Oblique;
    src:url('/font/Helvetica-BoldOblique.otf');
}

@font-face {
    font-family: Helvetica Oblique;
    src:url('/font/Helvetica-LightOblique.otf');
}    

@font-face {
    font-family: Helvetica Neue;
    src:url('/font/HelveticaNeueLTStd-ThEx.otf');
}

@font-face {
    font-family: Helvetica Oblique;
    src:url('/font/Helvetica-Oblique.otf');
}

Answer 2

首先，如果font-family包含多个单词，则需要使用引号：

cf：font-family: Helvetica;和font-family: "Helvetica Neue";

其次 - @font-face中使用了特殊的网络字体格式 - 它们是：.eot，.woff，.ttf和.svg。您需要使用一些工具为您生成这些字体。

第三 - 并非所有的字体都可以在您的网络项目中免费使用。例如，Helvetica需要花费一些钱。

Answer 3

即时通讯使用此代码（所有格式化所有浏览器所需的格式）：

@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

然后我就叫它：

.some-class {
     font-family: 'FontName';
}

使用http://www.fontsquirrel.com/tools/webfont-generator

进行字体转换

Answer 4

尝试在引号中包含多个单词的字体。

例如，

@font-face {
font-family: "Helvetica Light"; src:url('/font/Helvetica-Light.otf');
font-family: "Helvetica Oblique"; src:url('/font/Helvetica-BoldOblique.otf');
font-family: "Helvetica Oblique"; src:url('/font/Helvetica-LightOblique.otf');    
font-family: "Helvetica Neue"; src:url('/font/HelveticaNeueLTStd-ThEx.otf');
font-family: "Helvetica Oblique"; src:url('/font/Helvetica-Oblique.otf');
}

h1 {
    font-family: "Helvetica Neue";
}

h2 {
    font-family: "Helvetica Oblique";
    font-weight:bold;

}

.input {
    font-family: "Helvetica Oblique";
    font-weight: light;
}

希望这有帮助。

Answer 5

尝试这个：     h1 {         font-family：'Helvetica Neue';     }

h2 {
    font-family:'Helvetica Oblique';
    font-weight:bold;

}

.input {
    font-family:'Helvetica Oblique';
    font-weight: light;
}