将 .ttf 字体添加到文本混合中的框架

Question

我正在尝试在 A 型框架中使用 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">

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

将 .ttf 字体添加到文本混合中的框架

A frame adding a .ttf font into a mixin for text

aframe

工作示例：