JavaScript는 사용자의 브라우저가 표시할 수 있는 모든 글꼴을 감지할 수 있습니까?

사용자의 브라우저가 표시할 수 있는 모든 글꼴 나열

JavaScript가 브라우저에 표시 가능한 글꼴을 검색할 수 있습니까?

예, JavaScript를 사용하여 사용자 브라우저에서 지원되는 모든 글꼴 목록을 얻을 수 있습니다. 이를 통해 사용자가 선택할 수 있는 글꼴이 포함된 드롭다운을 생성할 수 있습니다.

글꼴 감지 구현

http://www.lalit.org/lab/javascript를 참조하세요. - 효율적인 JavaScript 솔루션을 위한 css-font-Detect:

코드 조각:

var Detector = function() {
    // baseFonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // testString
    var testString = "mmmmmmmmmmlli";

    // testSize
    var testSize = '72px';

    // helper functions
    var h = document.getElementsByTagName("body")[0];
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    // default measurements
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        s.style.fontFamily = baseFonts[index];
        h.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
        h.removeChild(s);
    }

    this.detect = function(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index];
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    };
};

작동 원리

이 코드는 다양한 글꼴에 걸쳐 문자의 고유한 모양을 활용합니다. 특정 글꼴로 렌더링된 텍스트의 너비와 높이를 기본 글꼴로 렌더링된 텍스트와 비교하여 대상 글꼴이 지원되는지 확인합니다.

위 내용은 JavaScript는 사용자의 브라우저가 표시할 수 있는 모든 글꼴을 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!