在sharpjs中使用多种字体

我正在使用 sharp.js 在上添加文本 png 形象我需要在不同的地方在图像上渲染3种字体,然而,只有一种字体被正确渲染,其他2种字体被重复。 我有中的字体 ttf 文件夹。

这是生成的输出的图像。

这是我在图像上添加文本的代码

sharp("chart.png")
  .composite([
    { input: svgBuffer, left: 300, top: 200 },
    { input: svgBuffer2, left: 300, top: 250 },
    { input: svgBuffer3, left: 300, top: 300 },
  ])
  .toFile("output.png");

以下是定义SVG缓冲区的代码。

const svgText = `
              <svg width="${width}" height="${height}">
              
              <style>
              @font-face{
                              font-family: Bahnschrift;
                              src: url(Bahnschrift-Regular.ttf);
                          }
                          .title {
                                  fill: white;
                                  font-size: 23px;
                                  font-family: Bahnschrift;
              }
              </style>
              
            <text x="45%" y="40%" text-anchor="middle" class="title">Bahnschrift Regular</text>
            </svg>`;

const svgText2 = `
            <svg width="${width}" height="${height}">

            <style>
            @font-face{
                            font-family: Roboto;
                            src: url(Roboto-Regular.ttf);
                        }
                        .title {
                                fill: white;
                                font-size: 23px;
                                font-family: Roboto;
            }
            </style>

          <text x="45%" y="40%" text-anchor="middle" class="title">Roboto Regular</text>
          </svg>`;

const svgText3 = `
          <svg width="${width}" height="${height}">

          <style>
          @font-face{
                          font-family: Lato;
                          src: url(Lato-Regular.ttf);
                      }
                      .title {
                              fill: white;
                              font-size: 23px;
                              font-family: Lato;
          }
          </style>

        <text x="45%" y="40%" text-anchor="middle" class="title">Lato Regular</text>
        </svg>`;

const svgBuffer = Buffer.from(svgText);
const svgBuffer2 = Buffer.from(svgText2);
const svgBuffer3 = Buffer.from(svgText3);