Home > Web Front-end > CSS Tutorial > Can JavaScript Detect All Fonts a User\'s Browser Can Display?

Can JavaScript Detect All Fonts a User\'s Browser Can Display?

DDD
Release: 2024-11-30 21:46:13
Original
364 people have browsed it

Can JavaScript Detect All Fonts a User's Browser Can Display?

List Every Font a User's Browser Can Display

Can JavaScript Retrieve Browser Displayable Fonts?

Yes, it is possible to obtain a list of all fonts supported by the user's browser using JavaScript. This enables the creation of a dropdown containing available fonts for user selection.

Font Detection Implementation

Refer to http://www.lalit.org/lab/javascript-css-font-detect for an efficient JavaScript solution:

Code Snippet:

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;
    };
};
Copy after login

Working Principle

This code exploits the unique appearance of characters across different fonts. By comparing the width and height of text rendered in a particular font against those rendered in base fonts, it determines if the target font is supported.

The above is the detailed content of Can JavaScript Detect All Fonts a User\'s Browser Can Display?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template