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

しかし、表示されません。ここで何が間違っていますか? OTF は FF と IE 内でサポートされるべきであることがわかります。

4

5 に答える 5

2

font-face作成できるカスタム フォントは 1 つだけです。'または"あまり重要ではありません。とにかくうまくいきます。ただし、使用しないのは少し不自然に思えるので、使用することをお勧めします。

編集: 最初のもののように、名前と s で使用する必要'がfont-familyありurlます

@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

このコードを使用しています（すべてのブラウザに必要なすべてのフォーマット）：

@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 に答える