javascript - html 5 flash/animate 自定义字体

Question

我正在用 HTML5/canvas 创建我的第一个 Animate(flash) CC 横幅。

我遇到的问题是我想添加自定义字体。我的想法是用 @font-face 添加它们。

这似乎在 CC (2015) 版本中有效，但我得到了版本 2015.1 的更新，现在我可以将 @font-face 添加到我的 html 文件中，但我不能将字体名称定义到 js 文件。我可以使用 typekit，但字体不在 typekit 上:-(

也许你们中的一位可以看到将字体名称放在哪里。
这是 js 文件的内容部分。

// library properties:
lib.properties = {
    width: 120,
    height: 600,
    fps: 25,
    color: "#FFFFFF",
    webfonts: {},
    manifest: []
};



lib.webfontAvailable = function(family) { 
    lib.properties.webfonts[family] = true;
    var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
    for(var f = 0; f < txtFilters.length; ++f) {
        txtFilters[f].updateCache();
    }
};

发布设置字体:

Answer 1

这是我发现对我有用的(使用 Animate CC 2017.5):

1. 使用文本工具 (T) 创建一个新的文本元素

2. 将属性更改为动态文本: Text tool properties

3. 将文本更改为您想要的字体。

4. 文件 > 发布
5. 打开已发布的 .html 和 .js 文件。
6. 像往常一样将 @font-face css 添加到 html 文件头(相应地更改字体的 src)。您也可以添加多个:

<style>
  @font-face {
    font-family: MyCustomFont;
    src: url("assets/mycustomfont.woff");
  }
</style>
<!-- write your code here -->

1. 在 .js 文件中找到您的文本元素并根据您的喜好对其进行编辑:

this.text = new cjs.Text("My dynamically changing text", "46px 'MyCustomFont'");

1. 完成!您的文本现在应该可以使用您的自定义字体正确呈现。