JavaScript で CSS フォント定義を使用せずに要素のレンダリングされたフォントを取得するにはどうすればよいですか?

CSS 定義がない場合の実際のレンダリングされたフォントの取得

JavaScript の領域内では、開発者は実際のフォントを確認する必要があることがよくあります。フォント関連の属性が明示的に定義されていない場合でも、特定の要素をレンダリングするために使用されるフォント。 CSS。この問題は、システムまたは Web ブラウザがレンダリングにデフォルトのフォント設定を使用している場合に発生します。

解決策:

非表示のフォントを明らかにするには、開発者は getComputedStyle 関数を利用できます。要素の計算されたスタイルを抽出します。必要なプロパティを引数として入力すると、フォント ファミリやサイズなどのレンダリング値を取得できます。プロセスを簡素化するカスタム関数を次に示します。

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

使用法:

たとえば、フォント サイズを取得するには、次のように関数を呼び出すだけです。

css(object, 'font-size'); // returns '16px', assuming that's the rendered size

重要注:

• このメソッドは Internet Explorer 8 ではサポートされていません。
• この関数は文字列を返すため、フォント ファミリなどの特定の情報を抽出するには後続の処理が必要になる場合があります。またはサイズ。

ライブデモ:

実際の例については、http://jsfiddle.net/4mxzE/ のライブ デモをご覧ください。このフィドルは、css() 関数を使用して、フォントフェイスが指定されていない div 要素のレンダリングされたフォントを取得する方法を示します。

以上がJavaScript で CSS フォント定義を使用せずに要素のレンダリングされたフォントを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。