5

Google フォント ファミリ名を選択リストに読み込んでいます。ユーザーがリストから任意のフォント ファミリを選択すると、そのフォントが動的に読み込まれます。私のコード:

$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=...", {}, function (data) {
    $.each(data.items, function (index, value) {
        $('#fc').append($("<option></option>").attr("value", value.family)
                .text(value.family));
    });
    $('#fc').selectmenu({ select: function () {
        $('body').append("<link rel='stylesheet' id='colorbox-css'  href='http://fonts.googleapis.com/css?family=" + escape($(this).selectmenu("value")) + "' type='text/css' media='all' />");
    }
    });
});

フォントをロードする前に、フォントのプレビューをユーザーに表示したいと思います。

これは可能ですか？

4

5 に答える 5

2

HiGoogleFontsを試してください。すべての Google フォントがドロップダウンに表示され、それぞれのプレビューが表示されます。選択されたフォントのみをロードします。フォントのプレビューに単一の画像を使用します。

于 2016-08-07T06:43:21.690 に答える
1

こちら で説明されているように、ページにフォントを読み込むことができます。次に、サンプル テキストを含む div を作成し、ドロップダウンから選択したフォントに基づいてスタイルを設定します。

具体的には、イベント ハンドラーの追加に関する最後のセクションを参照してください。JS を使用して、フォントの読み込みが完了したことを検出し、必要に応じて適用できます。

于 2012-07-20T13:27:34.633 に答える
1

私は最近、Google Fonts API 機能を追加して、現在利用可能な Google フォントの選択リストを常に更新するときに、この問題に自分で取り組みました。jQuery Fontselect Pluginをベースとして使用しましたが、目的に合わせてかなり変更しました。ここでどのように取り組んだかを説明します: https://www.bibleget.io/2020/04/released-v5-3-of-the-wordpress-plugin/ 基本的に、Google Fonts API への洗練された cURL リクエストを使用しています。フォントの名前に使用される文字のみを含む各フォントの縮小バージョンをローカルにダウンロードし、選択ドロップダウンを持つページにそれらの縮小バージョンのフォントをプリロードするため。ここで実際の動作を確認できます: https://youtu.be/zqJqU_5UZ5M

于 2020-04-09T14:32:06.980 に答える
1

この github プロジェクトが思い浮かびます。それもユーザーに Google フォントのプレビューを提供しますFontselect jQuery プラグイン

于 2013-03-05T08:29:36.903 に答える