ユーザーのブラウザが表示できるすべてのフォントをリストする
ブラウザに表示できるすべてのフォント（またはフォントファミリ）の名前を取得する方法はjavascriptにありますか？ （利用可能なすべてのフォントのリストを含むドロップダウンをユーザーに提供し、ユーザーがフォントを選択できるようにします。）このリストを事前にハードコーディングしたり、サーバーから送信したりする必要はありません。 （直観的には、ブラウザはどのフォントを持っているかを知っている必要があり、これはどういうわけかjavascriptにさらされるべきだと思われます。）
JavaScriptバージョンは少し不安定です。既知のフォントを繰り返しテストすることでフォントを取得します。
最も適切な方法は（適切なプラグインを使用する必要がありますが） se Flash です。ここでは、寸法を使用して個別にテストすることなく、フォントのリストを取得できます。
一部のデバイス（iDevice、Flashプラグインのないブラウザーなど）で動作しないという犠牲を払って正確なリストを作成するか、または JavaScript経由でのみサポートされる部分リスト を選択する必要があります。
はいあります！私もこれを使いたいので、あなたがこの質問をしてくれてとてもうれしいです。
質問のために+1、そしてあなたの答えはここにあります:)
http://www.lalit.org/lab/javascript-css-font-detect
コードfrom http://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js？ ver = 0.
/**
* 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;
};
概要
どのように機能しますか？
このコードは、各文字が異なるフォントで異なるように表示されるという単純な原則に基づいて機能します。そのため、同じフォントサイズの同じ文字列に対して、異なるフォントは異なる幅と高さを取ります。
<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>
これを検索すると、 Font.js も見つかりました。これは、ImageのようなFontオブジェクトを追加するため、フォントが実際に使用できる状態になっていることを確認できます。インストール済み/システムフォントでも動作します。欠点はIE_ +のみで、Object.defineProperty（他のブラウザにはあります）が、最新のWebを使用している場合、これはさらに優れたオプションのようです。 （悲しいことに、私は上記の答えを出さなければならず、今のところは賛成し続けています。:)）
上記の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));
}
};
deviceinfo.me に移動し、フォント検出ボタンをクリックします。
特定のキャラクターの既知のフォント画像を含むスプライトシートを使用して、同じキャラクターが描画されているキャンバス要素のスナップショットと比較し、ブラウザーが同じフォントとして報告するものと比較する、まったく異なる方法でこれを行うことができます。比較は resemble.js のようなもので行うことができます。
これは遅いですが、ブラウザが横になっていることを検出することもできます。