JavaScript에서 렌더링된 글꼴과 크기를 어떻게 얻을 수 있나요?

렌더링된 글꼴 공개: 실제 글꼴 면과 크기에 액세스

웹 개발 영역에서는 실제 글꼴 면과 크기를 검색해야 하는 경우가 많습니다. 특히 동적으로 생성된 콘텐츠나 CSS 스타일이 명시적으로 정의되지 않은 상황을 처리할 때 그렇습니다. object.style.fontFamily와 같은 스타일 속성에 액세스하는 JavaScript의 기존 접근 방식에서는 결과가 나오지 않기 때문에 이 작업은 어려울 수 있습니다.

두려워하지 마세요. 렌더링된 글꼴을 공개할 수 있는 기능을 JavaScript에 부여하는 솔루션이 있기 때문입니다. 속성. getCompulatedStyle 메소드는 우리가 찾는 글꼴 관련 속성을 포함하여 계산된 스타일에 액세스하는 열쇠를 보유합니다.

다음은 getCompulatedStyle 메소드를 활용하는 JavaScript 함수입니다.

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

이 함수를 사용하려면 예를 들어 요소의 글꼴 크기를 검색하려면 간단히 css(object, 'font-size')를 호출하세요. 이는 실제 렌더링된 글꼴 크기를 나타내는 '16px'와 같은 값을 반환합니다.

getCompulatedStyle은 IE8에서 지원되지 않는다는 점에 주목할 가치가 있습니다. 또한 계산된 글꼴은 시스템 기본값이나 브라우저 재정의로 인해 CSS에 정의된 원하는 글꼴과 항상 정렬되지 않을 수 있습니다. 그럼에도 불구하고 이 기능은 실제 렌더링된 글꼴 속성을 검색하는 안정적인 방법을 제공하여 개발자가 웹 페이지의 시각적 표현을 더 효과적으로 제어할 수 있도록 해줍니다.

위 내용은 JavaScript에서 렌더링된 글꼴과 크기를 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!