選択的スタイルのフォールバックフォントJavaScriptなし？

Question

JavaScriptを使用してフォールバックフォントをスタイリングする方法をいくつか見てきましたが、JavaScriptなしで行う方法があれば興味があります。

たとえば、Arial height:10px;を使用したいと思います。ユーザーがArialを持っていない場合は、Times height:24px;を使用します。そうでない場合は、青いサンセリフフォントを使用します。さて、むしろ不条理な例ですが、それは私が行っている一般的な効果を示しています。

ご協力いただければ幸いです！

Answer 1

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

あなたが参照するページはフォールバックフォントをスタイルしません。むしろ、フォントを動的に読み込みます（これを行うことができれば、フォールバックフォントは意味を失います）。

Answer 2

javascriptメソッドは、@ font-faceスタックと各ブラウザの正しいURLを提供するだけです。

次のようにあなたは、このスタックを使用することができます。

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

をJavaScriptはブラウザで無効になっている場合は、フォントがArialのがインストールされていない場合はhevetivaに、バックのArialに分類されます - など

に

通常はフォールバックフォントを使用しているため、元のフォントとほぼ同じように見えるため、異なる高さが問題になるはずはありません。

JavaScriptを使用すると、邪魔にならないように問題はありません。

HTML Jasvascriptとクラス名（私はここではjQueryのを好む）作る：

(function($){ 

    $(document).ready(function(){ 

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

    }); 

}(jQuery)); 

今、あなただけのCSSにJavaScriptを使用したりすることなく、異なるスタイルを設定することができます。実際のフォントファミリの用途に応じて、

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... 
}