0

Raleway の 2 つのウェイトを HTML メールに埋め込んでおり、自己ホストしたいと考えています。

Font Squirrel を使用してレギュラー ウェイトとエクストラ ボールド ウェイトを変換しましたが、レギュラー ウェイトしか機能しません。実際には 1 つのフォントが 2 つの別々のフォントとして埋め込まれているため、何らかの競合が発生する可能性があるかどうかわかりませんか?

フォント ファイル自体は、デスクトップ上で正しく表示されます。ローカルのブラウザーでは、両方のフォントが機能します。

問題を回避するフォントを変換する別の方法があるかどうか疑問に思っていますか?

埋め込みコード：

@font-face {
    font-family: 'ralewayregular';
    src: url('raleway-regular-webfont.eot');
    src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-regular-webfont.woff') format('woff'),
         url('raleway-regular-webfont.ttf') format('truetype'),
         url('raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'ralewayextrabold';
    src: url('raleway-extrabold-webfont.eot');
    src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-extrabold-webfont.woff') format('woff'),
         url('raleway-extrabold-webfont.ttf') format('truetype'),
         url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

フォント スタックのサンプル:

font-family: 'ralewayregular',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;

font-family: 'ralewayextrabold',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;

編集：

以前、Raleway を 2 つのウェイトを持つ 1 つのフォントとして扱って、改訂されたフォント スタックを試しました。一部のクライアントでは余分な太字が機能しているようですが、iPad の Apple Mail などの Web フォントの表示に通常問題がない電子メール クライアントでは機能していません。

@font-face {
    font-family: 'raleway';
    src: url('raleway-regular-webfont.eot');
    src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-regular-webfont.woff') format('woff'),
         url('raleway-regular-webfont.ttf') format('truetype'),
         url('raleway-regular-webfont.svg#ralewayregular') format('svg');
      font-weight: 400;
    font-style: normal;

}




@font-face {
    font-family: 'raleway';
    src: url('raleway-extrabold-webfont.eot');
    src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-extrabold-webfont.woff') format('woff'),
         url('raleway-extrabold-webfont.ttf') format('truetype'),
         url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
      font-weight: 800;
    font-style: normal;


}

改訂されたフォント スタック:

<h1 style="font-size : 16px; line-height : 24px; letter-spacing : 2.72px; color: #ffffff; font-family: 'Raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;  font-weight: 800;">TEXT</h1>
4

1 に答える 1

0

まず、font-family を 1 つの単語にしているので、これらの引用符は必要ありません。次に、実際には 2 つの異なるフォント名を使用する必要はありません。@font-face の太字のセクションに同じfont-family名前を付けることで、同じフォント名を保持できます。インライン css または byまたはタグのいずれかでfont-weight:bold指定すると、正常に動作するはずです。@font-face がまったくロードされておらず、OS のスタックにフォントがある場合を除き、偽の太字は問題になりません。font-weight<b><strong>

また、テストする前に、コンピューターのフォント スタックから raleway を無効にしてみてください。また、絶対パスにフォント ファイルの URL があります。

それらの1つが役立つことを願っています。

于 2013-09-30T15:41:44.127 に答える