JavaScript에서 CSS 글꼴 정의 없이 요소의 렌더링된 글꼴을 어떻게 얻을 수 있습니까?

CSS 정의가 없을 때 실제 렌더링된 글꼴 검색

JavaScript 영역 내에서 개발자는 종종 실제 렌더링된 글꼴을 확인해야 하는 경우가 있습니다. 글꼴 관련 속성이 CSS에 명시적으로 정의되지 않은 경우에도 특정 요소를 렌더링하는 데 사용되는 글꼴입니다. 이 문제는 시스템이나 웹 브라우저가 렌더링을 위해 기본 글꼴 설정을 사용할 때 발생합니다.

해결책:

숨겨진 글꼴을 찾으려면 개발자는 getCompulatedStyle 함수를 활용할 수 있습니다. 요소의 계산된 스타일을 추출합니다. 원하는 속성을 인수로 입력하면 글꼴 모음 및 크기를 포함하여 렌더링된 값을 얻을 수 있습니다. 프로세스를 단순화하는 사용자 정의 함수는 다음과 같습니다.

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

사용법:

예를 들어 글꼴 크기를 검색하려면 다음과 같이 함수를 호출하면 됩니다.

css(object, 'font-size'); // returns '16px', assuming that's the rendered size

중요 참고:

• 이 방법은 Internet Explorer 8에서 지원되지 않습니다.
• 함수는 문자열을 반환하므로 글꼴 모음과 같은 특정 정보를 추출하려면 후속 처리가 필요할 수 있습니다. 또는 크기를 선택하세요.

라이브 데모:

실제 예를 보려면 http://jsfiddle.net/4mxzE/에서 라이브 데모를 방문하세요. 이 바이올린은 CSS() 함수를 사용하여 글꼴이 지정되지 않은 div 요소에 대해 렌더링된 글꼴을 검색하는 방법을 보여줍니다.

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