2

使用可能なすべてのフォントを表示し、任意のフォントを選択できるドロップダウン メニューを作成したいと考えています。また、フォント色の選択ウィジェットを作成したいと考えています。多数のフォント スタイルが存在します。これらすべてのフォントを取得する方法と、ユーザーが選択した色を選択できるウィジェットを作成する方法を知りたいです。

フォント選択ドロップダウン メニューを作成するために、リストを使用しました。デモ目的で、3 ～ 4 個のフォント名を追加して表示しました。その正常に動作します。Google はすべてのフォント名のリストをくれましたが、html コードに書き留めるのは良い方法ではないと思います。これをすべて行うためのjsライブラリが存在するはずです。ある ？

4

4 に答える 4

6

おそらくやり過ぎです...しかし、これは私がGoogleFontAPIと少し前に書いたDocumentFragmentBuilderスクリプトを使用して思いついたフォントセレクターの例です。

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");​

これがキッチンシンクの例です...

于 2012-04-19T13:02:30.170 に答える
4

ユッカ・K・コルペラは正しいですが、あなたの質問に関して：

これにより、フォントファミリの選択を開始できます。

<!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>

フォントがインストールされているかどうかを確認することが重要な場合は、これを使用してツールで確認できます。また、フラッシュを使用しても問題がない場合は、font-detect-jsのようなものを使用できます（デモもありますが、 Chromeで動作させることができませんでした）。

そして、カラーセレクターには：jscolorを使用することをお勧めします

それがお役に立てば幸いです。

于 2012-04-19T11:02:15.533 に答える
1

使用可能なすべてのフォントを取得することができます。IE では、http: //www.cs.tut.fi/~jkorpela/listfonts1.html を参照してください。

しかし、ユーザーが好みのフォントを選択できるようにするためのコントロールで、このようなリストを提供することはあまり良い考えではありません。このリストには、ファンタジー フォント、Wingdings フォント、Symbol、奇妙な文字レパートリーを含むフォントなど、テキスト フォントとして意味をなさないメニュー フォントが実質的に確実に含まれます。

「すべてのフォント名」のリストは、偽物であるか、非常に特定の条件下でのすべてのフォント名のリストにすぎません。

ユーザーが好みのフォントを選択できるようにする最善の方法は、フォント ファミリをまったく設定せず、ブラウザーの設定 (通常はユーザーが制御可能) を完全に有効にすることです。ただし、そうしないのには十分な理由があります (たとえば、Times New Roman が最も一般的な工場出荷時の既定値であり、ほとんどのユーザーはブラウザーでフォント設定を変更することに関心がありません)。

于 2012-04-19T10:26:36.680 に答える