JavaScript에서 브라우저에서 사용 가능한 글꼴을 프로그래밍 방식으로 나열하려면 어떻게 해야 합니까?

브라우저에서 사용자 선택에 사용할 수 있는 글꼴 나열

문제:

웹 개발 시 다음이 필요할 수 있습니다. 사용자에게 브라우저에 표시할 수 있는 글꼴 드롭다운 목록을 제공합니다. 하드코딩되거나 서버에서 가져온 데이터에 의존하지 않고 JavaScript에서 이 목록을 프로그래밍 방식으로 얻을 수 있는 방법은 무엇입니까?

해결책:

JavaScript로 글꼴 감지

다행히도 JavaScript는 사용자의 컴퓨터에서 사용 가능한 글꼴을 감지하는 수단을 제공합니다. 시스템. 다음 코드 조각을 구현할 수 있습니다.

var detector = new Detector();

// Function to detect if a font is available
function detectFont(font) {
  return detector.detect(font);
}

// Get the list of detected fonts
var availableFonts = [];
for (var font in detector.detectFonts()) {
  if (detectFont(font)) {
    availableFonts.push(font);
  }
}

console.log(availableFonts);

브라우저가 표시할 수 있는 모든 글꼴의 배열을 기록합니다.

코드 설명

Detector 클래스는 "글꼴 핑거프린팅"이라는 기술을 사용하여 특정 글꼴을 기본 글꼴 세트와 비교하고 사용 가능한지 확인합니다. 이는 글꼴에 렌더링된 텍스트의 너비와 높이를 측정하고 이를 기본 글꼴에 렌더링된 텍스트의 측정값과 비교하여 수행됩니다. 측정값이 다르면 특정 글꼴이 있음을 나타냅니다.

추가 정보

글꼴 감지 방법은 다음과 같은 추가 접근 방식을 사용하여 더욱 향상될 수 있습니다. 시스템의 글꼴 파일을 사용하거나 Flash 또는 Canvas를 사용하여 텍스트를 렌더링합니다. 그러나 이러한 방법은 JavaScript의 기본 글꼴 감지만큼 안정적이지 않습니다.

위 내용은 JavaScript에서 브라우저에서 사용 가능한 글꼴을 프로그래밍 방식으로 나열하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!