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. 将属性更改为动态文本：

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 -->

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

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

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

Answer 2

要在使用 @font-face 在 HTML5/canvas 中创建的 Animate (Flash) CC 横幅中加入自定义字体，您需要确保您选择的字体满足 Web 使用的系统要求。验证字体是否与 HTML5 兼容并且可以在网络上合法使用。

在实施@font-face之前，请考虑以下系统要求：

文件格式：确保您的自定义字体文件采用适当的网络友好格式，例如 WOFF（网络开放字体格式）或 WOFF2。这些格式受到现代浏览器的广泛支持，建议用于高效的网络字体交付。

跨浏览器兼容性：在各种浏览器上测试您的横幅，以确保一致的字体渲染。不同的浏览器处理字体的方式可能略有不同，因此检查兼容性对于无缝的用户体验至关重要。

许可权限：确认您拥有在网络上使用和嵌入所选自定义字体的合法权利。某些字体可能有限制或需要特定的网络使用许可。

加载性能：如果字体文件很大，可以通过选择字符子集来优化加载性能。这有助于减少整体文件大小，缩短横幅的加载时间。

后备字体：实现后备字体，以防自定义字体因任何原因无法加载。这可以确保用户仍然可以看到文本内容，即使他们的系统不支持自定义字体或加载自定义字体时遇到问题。

以下是如何在 CSS 中使用 @font-face 的示例：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/customfont.woff') format('woff');
}

body {
  font-family: 'CustomFont', fallback-font, sans-serif;
}

将“CustomFont”替换为所选字体名称，将“path/to/customfont.woff”替换为正确的文件路径。此 CSS 规则建立一个字体系列并指定 WOFF 格式的自定义字体文件的路径。

通过遵守这些系统要求，您可以增强 Animate (Flash) CC 横幅的兼容性和性能，同时使用 @font-face 合并自定义字体。