0

尝试定义自定义字体：

@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 吗？

4

5 回答 5

2

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

编辑：您应该'在font-family名称和urls 中使用，如第一个

@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');
}
于 2013-06-17T12:33:57.387 回答
1

首先，如果字体系列包含超过 1 个单词，则需要使用引号：

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

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

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

于 2013-06-17T12:21:03.010 回答
1

我正在使用此代码（所有浏览器所需的所有格式）：

@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

于 2013-06-17T12:34:25.670 回答
0

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

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

}

.input {
    font-family:'Helvetica Oblique';
    font-weight: light;
}
于 2013-06-17T12:31:06.940 回答
0

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

例如，

@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;
}

希望这可以帮助。

于 2013-06-17T12:20:09.960 回答