ユーザーのブラウザが表示できるすべてのフォントをリストする

105

ブラウザで表示できるすべてのフォント（またはフォントファミリ）の名前を取得する方法はJavaScriptにありますか？（使用可能なすべてのフォントのリストを含むドロップダウンをユーザーに提供し、ユーザーがフォントを選択できるようにします。）このリストを事前にハードコーディングしたり、サーバーから送信したりする必要はありません。（直感的には、ブラウザはどのフォントを持っているかを知っている必要があり、これはどういうわけかJavaScriptに公開されているはずです。）

javascript  css  browser  fonts 
— マット
ソース

回答:

38

JavaScriptバージョンは少し不安定です。既知のフォントを繰り返しテストしてフォントを取得します。

最も適切な方法（適切なプラグインを使用する必要があります）は、Flashを使用することです。ここでは、寸法を使用して個別にテストすることなく、フォントのリストを取得できます。

一部のデバイス（iDevices、Flashプラグインのないブラウザーなど）で動作しないという犠牲を払って正確なリストを作成するか、JavaScriptのみでサポートを強化した部分的なリストを作成するかを決定する必要があります。

— アレックス
ソース
30
@Jaredフラッシュについて言及して？それが唯一の解決策であるとは言いませんでしたが、フォントを検出する最も正確な方法であると述べました。
— アレックス、2013
4
@alexはい。それは開発者、特に新しい開発者に間違った印象を与えるかもしれません。Flashを使用することの賛否両論をよりよく説明するために、回答を編集することをお勧めします。おそらく「推奨されませんが...」またはそのようなものです。
— Jared
19
@Jared読者がクラフトに不慣れな可能性がある場合に、読者に情報を最初から提供するためにすべての回答を書く必要がありますか？Flashには適切なプラグインが必要であることを説明しましたが、それが現在使用可能なすべてのフォントを取得する唯一の方法であることも述べました（JavaScriptメソッドはフォントのサブセットを検出するだけで、ほとんどのユースケースでおそらく十分です）。Flashを使用しなければならないことにも不満がありますが、このタスクを実行するために必要なのはこれだけです。
— アレックス、2013
7
@Jaredその最後の段落を参照してください？もう一度お読みください。
— アレックス、2013
10
@Jaredその段落は常に存在していました。
— アレックス、2013
73

はいあります！私もこれを使いたいので、あなたがこの質問をしてくれて本当にうれしいです。

質問の+1、そしてこれがあなたの答えです:)

http://www.lalit.org/lab/javascript-css-font-detect

コードからhttp://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3

/**
 * 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;
};

概要

それはどのように機能しますか？

このコードは、各文字が異なるフォントで異なるように表示されるという単純な原則に基づいて機能します。したがって、フォントが異なると、同じフォントサイズの同じ文字列に対して、幅と高さが異なります。

— マルコ
ソース
2
とてもうんざりしています。これは素晴らしいです。
— 2010
4
ありがとう、はい。これは、インストールされているフォントをテストするためのフォントのリストを取得すると便利ですが、問題は、最初にフォント名のリストを生成する方法です。
— mattsh 2010
43
これは、フォントがインストールされているかどうかについてのみyes / noを示します。
— rektide
2
最初は素晴らしいと思いましたが、いくつか問題が見つかりました。主な問題は、各ブラウザが異なる結果を返すことです。間違いなく信頼できません。
— BłażejKlisz
11
面白くて便利ですが、質問には答えません。これは、ブラウザで使用可能なフォントの名前を取得しません。消極的な-1を与える。
— BenjaminGolder
10

これを使用してこれを行う方法があります document.fonts

戻り値はドキュメントのFontFaceSetインターフェースです。FontFaceSetインターフェイスは、新しいフォントの読み込み、以前に読み込まれたフォントのステータスの確認などに役立ちます。

  • 戻り値は、重み、スタイルなどの詳細です。
function listFonts() {
  let { fonts } = document;
  const it = fonts.entries();

  let arr = [];
  let done = false;

  while (!done) {
    const font = it.next();
    if (!font.done) {
      arr.push(font.value[0]);
    } else {
      done = font.done;
    }
  }

  return arr;
}
  • フォントファミリのみを返します
function listFonts() {
  let { fonts } = document;
  const it = fonts.entries();

  let arr = [];
  let done = false;

  while (!done) {
    const font = it.next();
    if (!font.done) {
      arr.push(font.value[0].family);
    } else {
      done = font.done;
    }
  }

  // converted to set then arr to filter repetitive values
  return [...new Set(arr)];
}

HTMLのフォントをリンクせずにテストしました。次にRobotoフォントをリンクし、もう一度テストして、結果に追加しました。

— ユセフ・アブエグラ
ソース
このコードスニペットは完全に機能しました！`` `listFonts（）{let fonts = document ['fonts']; const it = fonts.entries（）; let arr = []; let done = false; while（！done）{const font = it.next（）; if（！font.done）{arr.push（font.value [0] .family）; } else {done = font.done; }} //繰り返し値をフィルタリングするためにセット、次にarrに変換されますreturn [... new Set（arr）]; } `` `
— rufreakde
5 
<SCRIPT>
    function getFonts()
    {
        var nFontLen = dlgHelper.fonts.count;
        var rgFonts = new Array();
        for ( var i = 1; i < nFontLen + 1; i++ )
            rgFonts[i] = dlgHelper.fonts(i); 

        rgFonts.sort();
        for ( var j = 0; j < nFontLen; j++ )
            document.write( rgFonts[j] + "<BR>" );
    }
</SCRIPT>

<BODY onload="getFonts()">
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px">
</OBJECT>
— MPC
ソース
2
@RobertSköld、はい、IEのみのようです。それはまだ多くの目的に役立ちますが、真剣に使用する場合、他のブラウザを使用している人々が理解できるように、いくつかの機能を検出する必要があります。たとえば、cs.tut.fi /〜jkorpela / listfonts1.htmlを
— Jukka K. Korpela
Windows PhoneのIE11では動作しませんか？Windows Phoneに追加する必要があるものはありますか？
— ジャット2014
4

FontFaceSet.check（）ソリューション

  • 利用可能なすべてのフォントを検出することは、一般的なブラウザフィンガープリント技術であるため、リストを直接返すJS APIが追加されることはほとんどありません。
  • FontFaceSet.check（）サポートは使用するには十分ですが、フォールバックが必要になります（この回答など）ます。、古いブラウザのです。
  • 次のフォントリストのチェックには150ms以上かかるため、必要な場合にのみ実行して結果をキャッシュする必要があります。

Windows 10フォントリスト

'Arial',
'Arial Black',
'Bahnschrift',
'Calibri',
'Cambria',
'Cambria Math',
'Candara',
'Comic Sans MS',
'Consolas',
'Constantia',
'Corbel',
'Courier New',
'Ebrima',
'Franklin Gothic Medium',
'Gabriola',
'Gadugi',
'Georgia',
'HoloLens MDL2 Assets',
'Impact',
'Ink Free',
'Javanese Text',
'Leelawadee UI',
'Lucida Console',
'Lucida Sans Unicode',
'Malgun Gothic',
'Marlett',
'Microsoft Himalaya',
'Microsoft JhengHei',
'Microsoft New Tai Lue',
'Microsoft PhagsPa',
'Microsoft Sans Serif',
'Microsoft Tai Le',
'Microsoft YaHei',
'Microsoft Yi Baiti',
'MingLiU-ExtB',
'Mongolian Baiti',
'MS Gothic',
'MV Boli',
'Myanmar Text',
'Nirmala UI',
'Palatino Linotype',
'Segoe MDL2 Assets',
'Segoe Print',
'Segoe Script',
'Segoe UI',
'Segoe UI Historic',
'Segoe UI Emoji',
'Segoe UI Symbol',
'SimSun',
'Sitka',
'Sylfaen',
'Symbol',
'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana',
'Webdings',
'Wingdings',
'Yu Gothic',

macOS / iOSフォントリスト

'American Typewriter',
'Andale Mono',
'Arial',
'Arial Black',
'Arial Narrow',
'Arial Rounded MT Bold',
'Arial Unicode MS',
'Avenir',
'Avenir Next',
'Avenir Next Condensed',
'Baskerville',
'Big Caslon',
'Bodoni 72',
'Bodoni 72 Oldstyle',
'Bodoni 72 Smallcaps',
'Bradley Hand',
'Brush Script MT',
'Chalkboard',
'Chalkboard SE',
'Chalkduster',
'Charter',
'Cochin',
'Comic Sans MS',
'Copperplate',
'Courier',
'Courier New',
'Didot',
'DIN Alternate',
'DIN Condensed',
'Futura',
'Geneva',
'Georgia',
'Gill Sans',
'Helvetica',
'Helvetica Neue',
'Herculanum',
'Hoefler Text',
'Impact',
'Lucida Grande',
'Luminari',
'Marker Felt',
'Menlo',
'Microsoft Sans Serif',
'Monaco',
'Noteworthy',
'Optima',
'Palatino',
'Papyrus',
'Phosphate',
'Rockwell',
'Savoye LET',
'SignPainter',
'Skia',
'Snell Roundhand',
'Tahoma',
'Times',
'Times New Roman',
'Trattatello',
'Trebuchet MS',
'Verdana',
'Zapfino',

FontFaceSet.check（）

const fontCheck = new Set([
  // Windows 10
'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
  // macOS
  'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
].sort());

(async() => {
  await document.fonts.ready;

  const fontAvailable = new Set();

  for (const font of fontCheck.values()) {
    if (document.fonts.check(`12px "${font}"`)) {
      fontAvailable.add(font);
    }
  }

  console.log('Available Fonts:', [...fontAvailable.values()]);
})();
スニペットを展開

— クリス
ソース
おかげで、コンテンツを表示したり、ページを解析したりすることで多くのcpuを満たさないようにするためにローカルシステムフォントに沿った最終的なWebデザインにも探していました
— Constantin
3

私がこれを検索したところ、Font.jsも見つかりました。これは、Imageとよく似たFontオブジェクトを追加するため、フォントが実際に使用できる状態になったことを確認することができます。インストール済み/システムフォントでも機能します。欠点はIE9 +が必要なことだけですObject.defineProperty（他のブラウザーにある）が、最新のWebを使用している場合、これはさらに優れたオプションのようです。（残念ながら、私は上記の答えに同意する必要があります。賛成票を投じて、今は先に進みます。）

— ストッフェ
ソース
3

上記のLalit Patelの検出器に2つのメソッドを追加しました。

  • addFont（family、stylesheetUrl、ruleString）->フォント 'family'が存在するかどうかを検出し、存在しない場合は、stylesheetUrlまたは指定された場合はruleStringを使用してフォントをロードするスタイルシートを追加します
  • addFontsArr（arr）->フォントの配列を追加します

これにより、次のことができます。

fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI']
(new FontDetector()).addFontsArr(fonts);

コード：

/**
 * 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');
 */
function FontDetector() {
    this.detect = detect;
    this.addFont = addFont;
    this.addFontsArr = addFontsArr;

    // 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;
    }

    function addFont(family, stylesheetUrl, ruleString) {
        if (detect(family)) {
            //console.log('using internal font '+family);
            return true;
        }
        if (stylesheetUrl) {
            console.log('added stylesheet '+stylesheetUrl);
            var head = document.head, link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            link.href = stylesheetUrl;
            head.appendChild(link);
            return true;          
        }

        if (ruleString) {
            console.log('adding font rule:'+rule);
            var newStyle = document.createElement('style');
            newStyle.appendChild(document.createTextNode(rule));
            document.head.appendChild(newStyle);
            return true;
        }

        console.log('could not add font '+family);
    }

    function addFontsArr(arr) {
        arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
    }
};
— コフィフス
ソース
2

特定の文字のフォントイメージがわかっているスプライトシートを使用して、同じ文字が描画されているcanvas要素のスナップショットと、ブラウザが同じフォントとして報告しているものを比較して、これは完全に異なる方法で行うことができます。比較はresemble.jsのようなもので行うことができます。

これは遅いですが、ブラウザが横になっていることを検出することもできます。

— fzzylogic
ソース
2

短い答えです。2020年のブラウザーでのフォント検出に関しては、Flashの使用がさらに悪い考えであることを除いて、ほとんど変わっていません。。

現在、使用可能なすべてのフォントを「一覧表示」するブラウザネイティブシステムはありません。ただし、ブラウザでは、FontFaceSet APIを使用してフォントがロードされているかどうかを確認できます。最近のブラウザではかなりよくサポートされています。

これは、Webフォントが完全にダウンロードされたかどうかを示すことを目的としていますが、システムフォントでも機能します。問題は、チェックするフォントのリストを提供する必要があることです。

したがって、user agent テスト（必ずしも正確ではない）と組み合わせて、各デバイスタイプの一般的なシステムフォントのリストを作成できます。次に、それらおよびロードしたWebフォントに対してテストします。

注：これは使用可能なフォントの完全なリストを提供しませんが、MS OfficeまたはAdobe製品によって一般的にインストールされるフォントを確認できます。

— ブライスハウィットソン
ソース
0

最近、HTML5キャンバスのcontext.font値を「ジャンク」などの無効な値に設定すると、変更がキャンバスによって無視されることに気付きました。これがブラウザ固有のものかどうかはわかりませんが、Chromeではこのように動作するようです。他の投稿も見ました（HTML 5のキャンバスフォントは無視されています）他のブラウザーで発生することを示す）。

次に、「10px sans serif」（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font）と思われるデフォルト値で文字列を書き出し、フォントを設定します。あなたがテストしているものに文字列をもう一度書きます。最初の図面と同じ場合、フォントは使用できません。

— AFF
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.