Question

我正在创建一个应用程序，让您可以在网络上预览字体，方式与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多张图像。

Answer 1

我认为他们根本不会产生它们。文本是静态的，用户无法更改，因此他们可以预生成所有图像。

如果您需要文本是动态的，实际上您可以选择在客户端或服务器端进行渲染。

如果要从用户“隐藏”字体，唯一的方法是服务器端呈现。实际上没有办法允许浏览器使用该字体，但不允许用户将其保存到任何他们喜欢的地方。他们只需使用Chrome Inspector或Firebug即可访问您网页下载的任何资源，无论您对网址进行模糊处理。

快速生成图像

1 个答案: