JavaScript는 사용자 글꼴 선택에 사용 가능한 글꼴을 어떻게 감지할 수 있습니까?

사용자 정의를 위해 지원되는 글꼴 감지

질문:

JavaScript를 사용하여 글꼴을 얻는 방법 브라우저 사용자에게 글꼴 선택 기능을 제공하기 위해 표시할 수 있는 모든 글꼴 목록이 있습니까?

정답:

Lalit Patel의 JavaScript 글꼴 감지 라이브러리: http://www.lalit.org/lab/javascript-css-font-Detect

코드:

/**
 * Detector JavaScript code to identify available fonts in a browser.
 */
var Detector = function() {
    // Base fonts for comparison against candidate fonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // Test string with characters of varying widths and heights
    var testString = "mmmmmmmmmmlli";

    // Test font size
    var testSize = '72px';

    // Append a SPAN element to the body for font width measurement
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    var defaultWidth = {}, defaultHeight = {};

    // Calculate default widths for base fonts
    for (var index in baseFonts) {
        s.style.fontFamily = baseFonts[index];
        document.body.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth;
        defaultHeight[baseFonts[index]] = s.offsetHeight;
        document.body.removeChild(s);
    }

    function detect(font) {
        var detected = false;

        // Compare candidate font's width and height against base fonts
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // Fallback to base font
            document.body.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            document.body.removeChild(s);
            detected = detected || matched;
        }

        return detected;
    }

    this.detect = detect;
};

작동 방식:

이 라이브러리는 다양한 글꼴 간의 문자 너비와 높이 차이를 분석합니다. 라이브러리는 후보 글꼴을 세 가지 기본 글꼴과 비교하여 브라우저에서 후보 글꼴을 사용할 수 있는지 여부를 결정할 수 있습니다.

위 내용은 JavaScript는 사용자 글꼴 선택에 사용 가능한 글꼴을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!