Home > Web Front-end > CSS Tutorial > How Can I Programmatically List Available Fonts in a Web Browser Using JavaScript?

How Can I Programmatically List Available Fonts in a Web Browser Using JavaScript?

DDD
Release: 2024-11-28 01:08:11
Original
691 people have browsed it

How Can I Programmatically List Available Fonts in a Web Browser Using JavaScript?

List of Available Fonts in a Web Browser Using JavaScript

In a web application, offering users a dropdown of available fonts enhances the user experience by allowing them to customize the appearance of the text. This customization requires obtaining a list of fonts the browser can display.

Fortunately, there is an intuitive solution to this problem. JavaScript provides a simple way to list all the fonts a browser has access to. This is a crucial step in enabling users to select their preferred font and tailor the web page to their liking.

Solution

A talented JavaScript developer has created a comprehensive solution that allows developers to detect available fonts in a browser. This method uses a technique of comparing the rendered width and height of specific characters. By cross-checking the deviation from default fonts, the script accurately determines the availability of a particular user-specified font.

The code for this solution is available on GitHub.

Implementation

/**
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        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);
    }

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

    this.detect = detect;
};
Copy after login

By utilizing this method, developers can easily create user interfaces that allow seamless font customization. Providing users with the ability to select their preferred fonts from a comprehensive list enhances the overall user experience and satisfaction with web applications.

The above is the detailed content of How Can I Programmatically List Available Fonts in a Web Browser Using JavaScript?. 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