html 5 flash/动画自定义字体

Posted 2023-02-16

【中文标题】html 5 flash/动画自定义字体

【英文标题】：html 5 flash/animate custom font

【发布时间】：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();
    
;

发布设置字体：

【问题讨论】：

我不确定这是一个编程问题，它看起来更像是一个关于如何在新版本的 Adob​​e Animate CC 中执行您可以在旧版本中执行的操作的问题，其中如果您可能应该在superuser.com 甚至只是adobe forum for Animate CC 上询问如何执行此操作，这将是这个问题的第一个明显位置。

好吧，我在 Adob​​e 论坛上查过，但没有运气。经过一番谷歌搜索后，我发现这必须以编程方式添加。所以这就是我来这里的原因。

【参考方案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'");

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