0

私は IE7-8 で偽のボールドとイタリック体をケッティングし続けています。これに関する複数の記事を読みましたが、それらはすべて Google Web フォントを対象としています。私は自分自身をホストしています。このスクリーンショットの例を参照してください。

ここに画像の説明を入力

スタイル宣言の書き方は次のとおりです。

@font-face{
    font-family:"myfont";
    src:url("font.eot");
    src:url("font.eot?#iefix") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype"),
        url("font.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"myfont";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
    font-style:normal;
    font-weight:bold;
}

それらはすべて IE9 と FF/webkit では正常に動作しますが、IE7-8 では何をしても偽の太字が表示されます。足りないものはありますか？

(コードに太字の斜体と斜体も追加しましたが、ここでは省略しました)

4

1 に答える 1

1

私がこの問題を解決できる唯一の確実な方法は、IE に譲歩し、太字に別の @font-face 名を宣言することでした。CSS3ソリューション（投稿したように）を保持しますが、太字の宣言を別の名前で追加します。あなたの例を使用すると、次のようになります。

/* THESE FIRST TWO ARE LEFT THE SAME */
@font-face{
    font-family:"myfont";
    src:url("font.eot");
    src:url("font.eot?#iefix") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype"),
        url("font.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"myfont";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
    font-style:normal;
    font-weight:bold;
}
/* SAME AS THE ABOVE BOLD FAMILY, BUT WITH A NEW NAME AND NO font-weight */
@font-face{
    font-family:"myfont-bold";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
}

ここでは、"font-weight: bold" を省略しました。

次に、次のようなものを IE 6-8 CSS ファイルに追加します。

b, strong, h1, h2, h3, h4, h5, h6, #top_navigation {
    font-family: 'myfont-bold', 'Arial Bold', Arial, times;
    font-weight: normal !important;
}

太字にしたいものをすべてリストに追加し、「Arial Bold など」を十分にバックアップに近い他の同様のフォントに置き換えます。唯一の問題は、フォントがロードされない場合、それらのフォントが通常の太さになることです。それは取る価値のあるリスクだと思います。

この問題をより詳細に説明している良い情報源は次のとおりです。

幸運を！

于 2013-10-18T06:57:53.910 に答える