利用可能なすべてのフォントが表示されるドロップダウンメニューを作成し、私たちが選択した任意のフォントを選択できます。また、私はフォント色の選択ウィジェットを作成したい。 font-stylesが大量に存在しません。私はどのようにこれらのフォントをすべて取得し、どのユーザーが自分の選択した色を選択できるかを使用してウィジェットを作成する方法を知りたい。htmlでフォント選択バーを作成するには
フォント選択ドロップダウンメニューを作成するには、リストを使用してデモ用に3〜4個のフォント名を追加して表示しました。そのうまく動作します。 Googleはすべてのフォント名のリストを教えてくれましたが、htmlコードで書き留めるのは良いアプローチではありません。 これを行うためのjsライブラリが存在するはずです。ある ？
ユッカK. Korpelaは正しいですが、あなたの質問について：
Thisあなたが選択フォントファミリを始める必要があります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="liveh1">Some text</h1>
<select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
<option> Serif </option>
<option> Arial </option>
<option> Sans-Serif </option>
<option> Tahoma </option>
<option> Verdana </option>
<option> Lucida Sans Unicode </option>
</select>
<script>
function updateh1family() {
var selector = document.getElementById('selecth1FontFamily');
var family = selector.options[selector.selectedIndex].value;
var h1 = document.getElementById('liveh1')
h1.style.fontFamily = family;
}
</script>
</body>
</html>
それはフォントがインストールされているかどうかを確認することが重要だ場合のことができます。ツールを使用して確認するにはthisを使用してください。それはあなたがfont-detect-jsのようなものを使用することができますフラッシュを使用しても大丈夫かどう はと（彼らはまた、demo持っているが、私はそれはクロームで仕事を得るために管理していませんでした）。
そして、カラーセレクタのために、私が使用してお勧めします：jscolor
はそれが役に立てば幸い、と幸運を！
その素晴らしいawesome..thanksたくさん – sachinjain024
jsColorは本当にクールです..たくさんの実感 – sachinjain024
http://www.cs.tut.fi/~jkorpela/listfonts1.html
を参照して、使用可能なすべてのフォント・オンIEを取得することが可能である。しかし、ほとんどのユーザーが自分の好みのフォントを選択させることを意図制御で、このようなリストを提供することをお勧めしないでしょう。このリストには、ファンタジーフォント、Wingdingsフォント、Symbol、奇妙なレパートリーを持つフォントなど、テキストフォントとして意味をなさないメニューフォントが実際に確実に含まれています。
「すべてのフォント名」のリストは、いくつかの非常に特殊な条件の下で、偽名かすべてのフォント名の一覧です。
ユーザーが自分の好みのフォントを選択させるための最善の方法は、あなたが彼らの完全な効果を取る（通常はユーザーが制御可能である）ブラウザの設定をさせる、のすべてのフォントファミリを設定しないということです。しかし、これをやっていないのが良い理由があります（Times New Romanが最も一般的な工場出荷時設定であり、ブラウザのフォント設定を変更することに興味がないユーザーがほとんどです）。
貴重なアドバイスをいただきありがとうございます。実際には、私は彼の好みのフォントで彼のコメントやメッセージを提出することができますが、私はあなたのポイントを持っているようにこれが必要です..おかげでたくさんありがとう – sachinjain024
@blunderboy、ユーザーの好みのフォントでコメントを取得するには、 PDFファイルとして提出し、お気に入りのワードプロセッサに書き出してPDFで保存するよう指示してください。そして、ワードプロセッサーがそのような機能を持ち、デフォルトでフォント埋め込みを使用することを望む必要があります。 –
おそらく行き過ぎ...しかし、ここでは、私はGoogleのフォントAPIと私はしばらく前に書いたDocument Fragment Builderスクリプトを使用して思い付いたフォント選択の例です。ここで
var FragBuilder = (function() {
var applyStyles = function(element, style_object) {
for (var prop in style_object) {
element.style[prop] = style_object[prop];
}
};
var generateFragmentFromJSON = function(json) {
var tree = document.createDocumentFragment();
json.forEach(function(obj) {
if (!('tagName' in obj) && 'textContent' in obj) {
tree.appendChild(document.createTextNode(obj['textContent']));
} else if ('tagName' in obj) {
var el = document.createElement(obj.tagName);
delete obj.tagName;
for (part in obj) {
var val = obj[part];
switch (part) {
case ('textContent'):
el.appendChild(document.createTextNode(val));
break;
case ('style'):
applyStyles(el, val);
break;
case ('childNodes'):
el.appendChild(generateFragmentFromJSON(val));
break;
default:
if (part in el) {
el[part] = val;
}
break;
}
}
tree.appendChild(el);
} else {
throw "Error: Malformed JSON Fragment";
}
});
return tree;
};
var generateFragmentFromString = function(HTMLstring) {
var div = document.createElement("div"),
tree = document.createDocumentFragment();
div.innerHTML = HTMLstring;
while (div.hasChildNodes()) {
tree.appendChild(div.firstChild);
}
return tree;
};
return function(fragment) {
if (typeof fragment === 'string') {
return generateFragmentFromString(fragment);
} else {
return generateFragmentFromJSON(fragment);
}
};
}());
function jsonp(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
}
function replacestyle(url) {
if (!document.getElementById('style_tag')) {
var style_tag = document.createElement('link');
style_tag.rel = 'stylesheet';
style_tag.id = 'style_tag';
style_tag.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style_tag);
replacestyle(url);
}
document.getElementById('style_tag').href = url;
}
function loadFonts(json) {
var select_frag = [
{
'tagName': 'select',
'id': 'font-selection',
'childNodes': [
{
'tagName': 'option',
'value': 'default',
'textContent': 'Default'}
]}
];
json['items'].forEach(function(item) {
var family_name = item.family,
value = family_name.replace(/ /g, '+');
if (item.variants.length > 0) {
item.variants.forEach(function(variant) {
value += ':' + variant;
});
}
select_frag[0].childNodes.push({
'tagName': 'option',
'value': value,
'textContent': family_name
});
});
document.getElementById('container').appendChild(FragBuilder(select_frag));
document.getElementById('font-selection').onchange = function(e) {
var font = this.options[this.selectedIndex].value,
name = this.options[this.selectedIndex].textContent;
if (font === 'default') {
document.getElementById('sink').style.fontFamily = 'inherit';
} else {
document.getElementById('sink').style.fontFamily = name;
replacestyle('https://fonts.googleapis.com/css?family=' + font);
}
};
}
jsonp("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDBzzPRqWl2eU_pBMDr_8mo1TbJgDkgst4&sort=trending&callback=loadFonts");
がKitchen Sink例です...
私はインスタントプレビューで、ドロップダウンリスト内のすべてのGoogleのフォントを表示するためのjQueryライブラリを作成しました。 https://github.com/saadqbal/HiGoogleFonts。 これは、2つのコールバックメソッドがあります。
これはあるレベルでリッチテキストエディタを開発しようとしているような臭いがあります。車輪を再構築しないでください。 – MetalFrog
あなたはGoogleのフォントapiで楽しむことができます：P http://jsfiddle.net/rlemon/ENpWt/ – rlemon