1

最初から、私がやろうとしていることは「それを行う正しい方法」ではないことを知っていると言う必要がありますが、私が働いているクライアントはこの特定のフォントを必死に望んでいます。

したがって、クライアントのWebサイトで、VOGUEが使用するのとまったく同じフォントを使用する必要があります。そこで、.eotと.ttfを取得して、サーバーにアップロードしました。次に、CSS定義を追加しました。

/*fonts fonts for IE*/
@font-face {
    font-family: VogueDidot;
    src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "VogueDidot Light";
    src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

/*fonts for other browsers*/
@font-face {
    font-family: VogueDidot;
    src: url('font/FBDidotL-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "VogueDidot Light";
    src: url('font/FBDidotL-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

そして私の要素のCSSは次のとおりです。

.post h1 {
    display: block;
    height: 100%;
    font-family: VogueDidot;
    font-size: 55px;
    text-transform: uppercase;
    overflow: hidden;
    line-height: 58px;
}

そして、通常、私はすべてが魅力のように機能するのを見ることを期待していました。

しかし、そうではありません...

次のようになります。

ここに画像の説明を入力してください

そして、それは私のウェブサイトでどのように見えるかです：

ここに画像の説明を入力してください

何か案は？

4

1 に答える 1

4

ブラウザがフォントを太字で表示しようとしているように見え、(細い線からの) 灰色のピクセルが隣り合って繰り返されています。使ってみてくださいfont-weight: normal（font-weight:boldh1要素から継承しています）。

于 2013-03-23T13:52:41.210 に答える