JavaScript를 사용하여 계산된 글꼴 계열 값을 검색하는 방법은 무엇입니까?

JavaScript를 사용하여 계산된 글꼴 계열 검색

이 기사에서는 이전 문의를 확장하여 실제 글꼴 이름을 얻는 방법을 탐구합니다. 대체 요소를 제외한 DOM 요소. 일반 "계산 스타일" 메서드는 대체 항목을 포함하여 전체 글꼴 문자열을 검색하지만, 우리의 목표는 요소에서 사용되는 특정 글꼴을 분리하는 것입니다.

이를 달성하기 위해 modern에서 제공하는 getCompulatedStyle() 메서드를 활용합니다. 브라우저. 다음 코드 조각은 접근 방식을 보여줍니다.

<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는 대상 단락 요소를 나타냅니다. getCompulatedStyle() 메서드는 요소의 계산된 스타일이 포함된 CSSStyleDeclaration 객체(compStyles)를 반환합니다. 계산된 글꼴 계열을 검색하려면 대체를 제외하고 실제 글꼴 이름이 포함된 문자열을 반환하는 getPropertyValue('font-family') 메서드를 사용하십시오.

이 접근 방식은 다음을 포함한 대부분의 주요 브라우저에서 지원됩니다. 크롬, 파이어폭스, 사파리, 엣지. 자세한 내용은 Mozilla 개발자 네트워크 문서(https://developer.mozilla.org/en-US/docs/Web/API/Window/getCompulatedStyle)를 참조하세요.

위 내용은 JavaScript를 사용하여 계산된 글꼴 계열 값을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!