10

ブラウザーが実際のイタリック体のフォント スタイルをロードしないという問題を抱えている多くの人々について読んだことがあります。これは私のcssコードです：

h2 {
    font-family:"Bell MT", Georgia, serif;
    font-size:31px;
    font-style:oblique;
    font-weight:normal;
    color:#e19614;
}

font-weight を太字以上に設定すると、得られる効果は望ましい斜体フォントになりますが、太さを通常 (望ましい設定) に設定すると、実際のイタリック フォントに戻ります。この場合は (Bell MT)とても違う..

助言がありますか？

4

4 に答える 4

4

css 変換を使用した醜いハック:

http://jsfiddle.net/DQnVS/1/

span {
    display: inline-block;
 -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
     -ms-transform: skewX(-30deg);
      -o-transform: skewX(-30deg);
         transform: skewX(-30deg);
​}

</p>

于 2012-06-14T23:47:05.697 に答える
2

フォントをエイリアスすることでそれを行うことができます。これは、フォントがあなたが提案したものを超えて置き換えられていない場合にのみ機能します (ここでは、キャッチオールオブタイプのキーワードはserif使用できません) が、Web フォントを使用することでそれを保証できます。Web フォントはバックアップとして使用できるため、常にダウンロードする必要はありません。

最初にバックアップなしで試してみましょう:

@font-face {
  font-family: 'Fake Oblique Font';
  font-style: normal;
  font-weight: 400;
  src: local('Bell MT'), local('Georgia');
}
@font-face {
  font-family: 'Fake Oblique Font';
  font-style: normal;
  font-weight: 700;
  src: local('Bell MT Bold'), local('Georgia Bold');
}
*
{
    font-family: 'Bell MT Bold', Georgia, serif;
}
.oblique
{
    font-style: oblique;
    font-family: 'Fake Oblique Font';
}

「Fake Oblique Font」がどのように機能するかを調べる際に、ブラウザーはこれらの宣言で言及されているフォームのみを使用できます。私のマシンでは Bell MT を使用できませんが、これはジョージアとジョージア ボールドを強制的な斜めスタイルでうまく使用しています: http://jsfiddle.net/k1w1zt0g/x偽の斜め。

local()これが機能しないのは、宣言で のような一般的なラベルを使用できないため、言及されているフォントがどれも使用できない場合serifです。それを受け入れるか（フォールバックしているserif場合は、とにかくフォールバックしているため、目的のデザインからすでに少し離れています）、またはWebフォントの保証を使用することを決定できます。MS は Web で使用するために Bell MT のライセンスを取得していますが、これを証明するためだけにライセンスを取得するつもりはないので、代わりに Google Fonts の Noto Serif を使用します。

Noto Serif は、標準、太字、イタリック、太字イタリックのフルセットを提供するため、彼女にとって便利な選択肢です。これにより、より完全な範囲の変更を示すことができます。以下のコードで使用されている太字イタリック体のフォントを削除し、使用されているときにイタリック体を太字にすることで、ブラウザがそれをさらに偽造することを確認します。

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  /* There are lots of pros and cons about just how you allow or disallow local fonts
     to be used. I'll go with allowing it here, to show it works throughout, but by
     all means change this to local('☺') to block local use, or so on. */
  src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif Fake Oblique';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url(http://fonts.gstatic.com/s/notoserif/v4/Lpe_acwQmwESv6cuCHE3rfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif Fake Oblique';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPYSoAJ3FdnHwSRdilZRLja4.woff) format('woff');
}
*
{
    font-family: 'Noto Serif';
}
.oblique
{
    font-family: 'Noto Serif Fake Oblique'; /* Force faking, by only providing non-italic, non-oblique forms. */
    font-style: oblique;
}

http://jsfiddle.net/k1w1zt0g/1/

于 2014-08-30T14:29:00.800 に答える