html 5 flash/动画自定义字体答案

【问题标题】：html 5 flash/animate custom fonthtml 5 flash/动画自定义字体
【发布时间】：2016-09-17 19:36:07
【问题描述】：

我正在 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();
    }
};

发布设置字体：

【问题讨论】：

我不确定这是一个编程问题，它看起来更像是一个关于如何在新版本的 Adobe Animate CC 中执行您可以在旧版本中执行的操作的问题，其中如果您可能应该在superuser.com 甚至只是adobe forum for Animate CC 上询问如何执行此操作，这将是这个问题的第一个明显位置。
好吧，我在 Adobe 论坛上查过，但没有运气。经过一番谷歌搜索后，我发现这必须以编程方式添加。所以这就是我来这里的原因。

标签： javascript css html flash fonts

【解决方案1】：

我发现这对我有用（使用 Animate CC 2017.5）：

使用文本工具 (T) 创建一个新的文本元素
将属性更改为动态文本： Text tool properties
将文本更改为所需的字体。
文件 > 发布
打开已发布的 .html 和 .js 文件。
像往常一样将@font-face css 添加到html 文件头（相应地更改字体的src）。您还可以添加多个：

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

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

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

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

【讨论】：