JavaScript を使用して計算されたフォントファミリー値を取得するにはどうすればよいですか?

JavaScript を使用した計算フォントファミリーの取得

この記事では、以前の調査の拡張を掘り下げ、実際のフォント名を取得する方法を検討します。 DOM 要素の、フォールバックを除く。一般的な「計算されたスタイル」メソッドは、フォールバックを含む完全なフォント文字列を取得しますが、私たちの目的は、要素で使用される特定のフォントを分離することです。

これを達成するために、モダンなメソッドが提供する getComputedStyle() メソッドを利用します。ブラウザ。次のコード スニペットは、このアプローチを示しています。

<code class="javascript">let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family'); // e.g. "Times New Roman"</code>

上の例では、para はターゲットの段落要素を表します。 getComputedStyle() メソッドは、要素の計算されたスタイルを含む CSSStyleDeclaration オブジェクト (compStyles) を返します。計算されたフォント ファミリを取得するには、getPropertyValue('font-family') メソッドを使用します。このメソッドは、フォールバックを除いて、実際のフォント名を含む文字列を返します。

このアプローチは、次のようなほとんどの主要なブラウザでサポートされています。 Chrome、Firefox、Safari、Edge。詳細については、Mozilla Developer Network のドキュメントを参照してください: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle.

以上がJavaScript を使用して計算されたフォントファミリー値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。