将 .ttf 字体添加到文本 mixin 中的框架答案

【问题标题】：A frame adding a .ttf font into a mixin for text将 .ttf 字体添加到文本 mixin 中的框架
【发布时间】：2021-04-29 23:51:44
【问题描述】：

我正在尝试在 A-frame 中使用 Georgia 字体。我找到并下载了它，然后将其上传到资产中。这是一个 .ttf 文件类型，所以我不确定这是否是它不起作用的原因，但是当我尝试在我的代码中使用它时，它不起作用。

这是我在资产标签中尝试过的代码：

a-asset-item id="georgia.ttf" src="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia.ttf?v=1619266271805">

a-mixin id="texts" text="color: #303030; width: 1.8; lineHeight: 60; align: center; baseline: top; wrapCount: 12; font: georgia.ttf">

【问题讨论】：

标签： aframe

【解决方案1】：

在 3D 中使用字体并不是那么简单。必须使用几何图形或纹理重新渲染每个字符。我强烈建议您阅读整个 text A-Frame 文档页面或至少阅读标记的段落。您不能使用标准字体文件类型。

在 A-Frame 中，他们决定采用以下格式：

海上自卫队
自卫队

这些是特定字体中每个字母的“图像”，带有描述该图像的 .json 文件。

MSDF 图像文件示例（Montserrat-Italic）：

工作示例：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
        <style>
        
        </style>
    </head>
    <body>
        <a-scene>
        <a-text value="hello in your font"
                position="0 1.6 -1"
                color="red"
                negate="false"
                font="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia-msdf.json"
                font-image="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia.png?v=1619693337804">
          </a-text>
          <a-text value="hello in regular"
                position="0 2 -1"
                color="red">
          </a-text>
        </a-scene>
    </body>
</html>

【讨论】：

啊，好吧，如果我只想让文本出现在 A-Frame 中，但作为 2D 文本出现，那是一样的吗？
如果你想在你的 3d 场景中使用它，恐怕这是唯一的方法（至少文档是这么说的）。如果您需要像 UI 之类的 2d 文本，也许您可以尝试将标准 HTML 文本覆盖在 a-frame 场景之上？然后，您将不得不发挥智慧 z-index 和定位。但它不会成为一帧场景的一部分
啊，我明白了，那就按文档的方式做吧，谢谢你的帮助！
我按照文档说的做了，并生成了 MSDF 字体以放入 mixin，但它没有显示出来，我不知道为什么......我不是打算将它作为资产包含?这是代码：glitch.com/edit/#!/vr-climate-change-memorial
关于我的最后评论。这是部分错误的，我不能再编辑它了。所以您不需要将两个文件放在同一位置，您可以使用上面示例中所示的属性指定 png 和 json 文件位置。但是，如果您使用font 参数仅指定 json，那么它将根据 json sais 查找 png 文件（通常是相同的位置）