我正在尝试在 HTML5 中创建一个字体查看器,用户在他们的 PC 上选择一种真正的字体,我的代码将加载它,然后在画布上呈现文本。
我有文件选择工作,它返回c:\fakepath\myfont.ttf
我已经将文本渲染到画布上。
但我很难将所选字体实际加载为画布字体。所以我正在寻找一种从文件中加载字体并将其设置为画布字体的方法,有什么想法吗?
我注意到 css @font-face 可以指定自定义字体,但可以在游戏加载后在运行时更改吗?
TIA
您正在寻找context.font
房产(http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-font)
您必须使用在 @font-face 声明中声明的名称。
示例:
context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
使用前需要设置字体fillText
。您将无法“替换”已经写在画布上的字体,因为它不再被视为文本而是位图数据。
编辑:好的,您在问题中谈论了太多事情,这让我感到困惑。
你只需要上传(如果你想异步,你可以试试 HTML5 API)。然后服务器需要返回您将插入到样式元素中的@font-face 声明(您可以动态创建它)。
然后你只需要使用我告诉你的字体。这很简单: