JavaScript で計算されたスタイルを使用して特定のフォント ファミリ名を取得する方法

JavaScript で計算されたフォントファミリーを取得する

以前の調査の延長として、ブラウザー間のフォントファミリーの決定に対処するという課題が生じます。フォント サイズの決定は解決されましたが、正確なフォント ファミリを特定することはさらなる困難を引き起こします。

現在の実装では、完全なフォント文字列のみが抽出されます。これには、「Times New Roman、Georgia、Serif」などの積み重ねられた代替文字が含まれる場合があります。ただし、フォント ドロップダウン メニューの設定と一致させるために、DOM 要素で使用される実際のフォントを表す固定フォント名を精査します。

強力な getComputedStyle() メソッドを利用して、計算されたフォントを取得できます。ほとんどの主要なブラウザと互換性のある方法で -family を使用します:

<code class="js">let paragraph = document.querySelector('p');
let computedStyle = window.getComputedStyle(paragraph);
let fontfamily = computedStyle.getPropertyValue('font-family'); // e.g. "Times New Roman"</code>

このアプローチにより、取得されたフォント ファミリが DOM 要素上で現在レンダリングされているフォントを正確に反映することが保証され、シームレスなフォント ドロップダウン メニューの配置が可能になります。

以上がJavaScript で計算されたスタイルを使用して特定のフォント ファミリ名を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。