1

myfontsと同じように、Web 上でフォントをプレビューできるアプリを作成しています。どうやってこんなに早くできるか知ってる人いますか？

私の方法は、HTML5 Canvas と Javascript を使用してフォント プレビューを生成することです。これは、サーバー側で実行し、PHP GD ライブラリまたは Imageick を使用して画像を生成する代わりの方法です。

ただし、HTML5 キャンバスを使用すると処理が高速になり、すべての処理がクライアント側で行われます。font-face を使用してフォントをロードする必要があるため、ロードしたフォントを非表示にするのに問題があります。

    @font-face {
        font-family: 'Press Start 2P';
        src: url('fonts/PressStart2P.ttf');
    }

JS を使用してキャンバスにレンダリングします。

        $('#draw').click(function () {
            var canvas = $('canvas')[0],
            ctx = canvas.getContext('2d');
            ctx.font = '12px "Press Start 2P"';
            ctx.fillStyle = '#000';
            ctx.fillText('Hello, world!', x, y += 20);
            ctx.fillRect(x - 20, y - 10, 10, 10);
        });

フォントパスを秘密に保つ方法や、画像をすばやく生成するためのその他の代替方法に関するアイデア。各ページに約 40 枚以上の画像を頻繁に生成する必要があります。

4

1 に答える 1

2

私は彼らがそれらを本当に速く生成するとは思わない。テキストは静的であり、ユーザーが変更することはできないため、すべての画像を事前に生成することができます。

テキストを動的にする必要がある場合は、クライアント側またはサーバー側でレンダリングするオプションがあります。

ユーザーからフォントを「隠し」たい場合、唯一の方法はサーバー側のレンダリングです。ブラウザがフォントを使用できるようにする方法はありませんが、ユーザーが好きな場所に保存することはできません。URL を難読化しても、Chrome Inspector または Firebug を使用して、Web ページからダウンロードされたリソースにアクセスできます。

于 2012-04-29T12:31:42.323 に答える