3

JavaScript を使用してフォールバック フォントのスタイルを設定する方法をいくつか見てきました。1 つは Google と Typekit によるものです。

たとえば、Arial を使用したいのheight:10px;ですが、ユーザーが Arial を持っていないheight:24px;場合は Times を使用し、そうでない場合は青いサンセリフ フォントを使用したいと考えています。わかりました、ばかげた例ですが、私が目指している一般的な効果を示しています。

どんな助けでも大歓迎です！

4

2 に答える 2

1

JavaScript メソッドは、@font-face スタックとすべてのブラウザーに適切な URL を提供するだけです。

このスタックは次のように使用できます。

font-family:your-google-font-name, arial, helvetica, freesans, sans-serif;

ブラウザで JavaScript が無効になっている場合、フォントは arial にフォールバックし、arial がインストールされていない場合は hevetiva にフォールバックします。

通常、元の必要なフォントとほぼ同じように動作し、見える代替フォントがあるため、異なる高さは問題になりません。

JavaScript を使用すると、目立たないように設定しても問題ありません。

Jasvascript で html className を作成します (ここでは jQuery を好みます):

(function($){

  $(document).ready(function(){

    $('html').addClass('withJS');

  });

}(jQuery));

CSS だけで Javascript の有無にかかわらず、さまざまなスタイルを設定できるようになりました。

実際の font-family の使用に応じて異なる高さを設定する (body タグの例)

var myFontFamily = $('body').css('fontFamily');

// Log to see whats the name you are working with:
console.log(myFontFamily);

if(myFontFamily == 'your-family-name-here'){
  $('body').css({fontSize: '20px' });
} else {
  // do something else...
}
于 2012-04-19T09:44:58.497 に答える
1

CSSでそれを行う方法はありません。JavaScript でそれを行う方法を見つけたら、共有してください。(IE の JavaScript でインストールされているすべてのフォントのリストを取得する方法はありますが、クロスブラウザーの方法は知りません。)

参照しているページでは、代替フォントのスタイルが設定されていないことに注意してください。むしろ、フォントを動的に読み込みます (それができる限り、代替フォントは意味を失います)。

于 2012-04-19T05:15:36.553 に答える