JavaScript でレンダリングされたフォントのフェイスとサイズを取得するにはどうすればよいですか?

レンダリングされたフォントの公開: 実際のフォント フェイスとサイズへのアクセス

Web 開発の領域では、多くの場合、実際のフォント フェイスとサイズを取得する必要があります。特に、動的に生成されたコンテンツや、CSS スタイルが明示的に定義されていない状況を扱う場合に重要です。 object.style.fontFamily などのスタイル プロパティにアクセスする JavaScript の従来のアプローチでは結果が得られないため、このタスクは困難になる可能性があります。

心配する必要はありません。レンダリングされたフォントを公開する権限を JavaScript に付与するソリューションが存在します。属性。 getComputedStyle メソッドは、必要なフォント関連のプロパティなど、計算されたスタイルにアクセスするための鍵を保持します。

getComputedStyle メソッドを利用する JavaScript 関数は次のとおりです。

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

この関数を使用するには、たとえば、要素のフォント サイズを取得するには、単に css(object, 'font-size') を呼び出します。これにより、実際にレンダリングされたフォント サイズを表す「16px」のような値が返されます。

getComputedStyle は IE8 ではサポートされていないことに注意してください。さらに、システムのデフォルトまたはブラウザーのオーバーライドにより、計算されたフォントが CSS で定義された目的のフォントと常に一致するとは限りません。それにも関わらず、この関数は実際にレンダリングされたフォント属性を取得する信頼性の高い方法を提供し、開発者が Web ページの視覚的なプレゼンテーションをより詳細に制御できるようにします。

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