0

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

そのため、クライアントの 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;
}

そして、通常、すべてが魔法のように機能することを期待していました。

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

これは次のようになります。

https://lh.rs/8M9Q7EvRBapv

そして、ここに私のバージョンがあります:

https://lh.rs/Lbini5YbQZlX

何か案は？

4

1 に答える 1

0

カスタム フォントの使用は、すべてのブラウザーでフォントのレンダリングが異なる傾向があるため、すべてのブラウザーでピクセル パーフェクトではないことに注意することが重要です。もう 1 つの問題は、ウィンドウ内で ClearType を有効にしない人々である可能性があります。この場合はそうではないと確信していますが、他の読者のために、この情報を含めることにしました。

.ttf と .eot のみを使用しているため、フォントのサポートはかなり制限されているようです。

  • ttf (TrueType フォント)
  • oft (Adobe/Microsoft オープン フォント タイプ、別名 OpenType)
  • eot (組み込み OpenType)
  • woff (Web Open Font Format)
  • svg (スケーラブル ベクター グラフィックス)

SVG は最高の品質を提供するため、可能な限り SVG を使用するのが理想的です。SVG は、最新バージョンの Andriod Browser、Firefix、Safari、Opera、Chrome でサポートされていますが、IE ではサポートされていません。

個人的には、フォントをこれらすべてのファイル タイプに変換し、結果が改善されるかどうかを確認します。ブラウザは自動的に好みのフォント タイプを使用します。Font 2 Webを使用して他の形式に変換できます。フォントには著作権があり、クライアントにはライセンスが必要であり、一部のフォントは Web での使用さえ許可されていないことに注意することが重要です。

于 2013-03-23T14:41:29.457 に答える