JavaScript에서 계산된 스타일을 사용하여 특정 글꼴 계열 이름을 검색하는 방법은 무엇입니까?

JavaScript에서 계산된 글꼴 계열 검색

이전 문의에 대한 확장으로, 브라우저 간 글꼴 계열 결정을 해결해야 하는 문제가 발생합니다. 글꼴 크기 결정은 해결되었지만 정확한 글꼴 계열을 식별하는 것은 추가적인 어려움을 야기합니다.

현재 구현에서는 "Times New Roman, Georgia, Serif"와 같은 스택 대체 항목으로 구성될 수 있는 전체 글꼴 문자열만 추출합니다. 그러나 글꼴 드롭다운 메뉴 설정과 일치시키기 위해 우리는 정밀 조사 중인 DOM 요소에 사용된 실제 글꼴을 나타내는 고정 글꼴 이름을 찾습니다.

강력한 getCompulatedStyle() 메소드를 활용하여 계산된 글꼴을 검색할 수 있습니다. -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 중국어 웹사이트의 기타 관련 기사를 참조하세요!