1

我正在创建一个应用程序，让您可以在网络上预览字体，就像myfonts一样。有谁知道他们是怎么做到这么快的？

我的方法是使用 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

我不认为他们生成它们的速度真的很快。文本是静态的，用户无法更改，因此他们可以预先生成所有图像。

如果您需要动态文本，您确实可以选择在客户端或服务器端呈现。

如果你想对用户“隐藏”字体，唯一的方法是服务器端渲染。确实没有办法允许浏览器使用字体，但不允许用户将其保存到他们喜欢的任何地方。他们可以只使用 Chrome Inspector 或 Firebug 来访问您的网页下载的任何资源，无论您如何混淆 URL。

于 2012-04-29T12:31:42.323 回答