ユーザーのブラウザで表示できるすべてのフォントをリストします
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 中国語 Web サイトの他の関連記事を参照してください。