我正在使用夏普库创建动态JPEG车牌图像。
基本上，我有一个PNG，这是一个虚荣的车牌没有数字。然后我创建一个svg，代码如下

const svg = new Buffer(
        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${x} ${y} 500 40">
            <defs>
            <style type="text/css">
                <![CDATA[
                    @font-face {
                        font-family: LicensePlate;
                        src: url('LicensePlate.ttf');
                    }
                    svg {
                        width: 100%;
                        height: 100%;
                    }
                ]]>
            </style>
            </defs>

            <text x="0" y="0" font-family="LicensePlate" font-size="${fontsize}" letter-spacing="${letterspace}">
                ${platenumber.toUpperCase()}
            </text>
        </svg>`
    );

传入所需的宽度、高度和车牌号码。然后，我使用sharp库将我的SVG覆盖在车牌的中间。一切都很好。
但是，我已经导入了自定义车牌字体（LicensePlate.ttf）。为了调试代码中的SVG图像，我制作了一个实际的SVG图像文件，我在浏览器中打开它，以确保它看起来都是正确的。
问题是，当最终的JPEG文件创建时，它不包含我的自定义字体。相反，它福尔斯在Verdana上。
我的问题是，有没有什么方法可以保持SVG字体，同时创建图像与夏普？
谢谢！

完整代码

function createImage(platenumber) {
    //Trying to create some sort of responsiveness
    let fontsize = 80;
    let letterspace = 10;
    let width = 300;
    let height = 90;
    let x = 0;
    let y = -45;

    const inputlength = platenumber.length;

    //Minumum Length
    if (inputlength == 2) {
        x = -200;
    }
    if (inputlength == 3) {
        x = -150;
    }
    if (inputlength == 4) {
        x = -130;
    }
    if (inputlength == 5) {
        x = -105;
    }
    if (inputlength == 6) {
        x = -65;
    }

    try {
        console.log('stream is duplex, ', pipe instanceof stream.Duplex);
        //Read the svg code into a buffer with a passed in plate number
        const svg = new Buffer(
            `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${x} ${y} 500 40">
                <defs>
                <style type="text/css">
                    <![CDATA[
                        @font-face {
                            font-family: LicensePlate;
                            src: url('LicensePlate.ttf');
                        }
                        svg {
                            width: 100%;
                            height: 100%;
                        }
                    ]]>
                </style>
                </defs>

                <text x="0" y="0" font-family="LicensePlate" font-size="${fontsize}" letter-spacing="${letterspace}">
                    ${platenumber.toUpperCase()}
                </text>
            </svg>`
        );

        const plateid = rand.generate(10);

        //Create a write stream to a randomly generated file name
        const write = new fs.createWriteStream(`plates/${plateid}.jpg`);

        //Create the sharp pipeline
        const pipeline = pipe
            .overlayWith(svg, { gravity: sharp.gravity.center })//we center the svg image over the top of whatever image gets passed into the pipeline
            .jpeg();//we convert to JPG because it is a compressed file format and will save space (we could also do webp if we really want to be slick about it)

        //Create the read stream from the license plate template
        const read = new fs.createReadStream('plate-2.png')
            .pipe(pipeline)//pipe out sharp pipeline
            .pipe(write);//add the write stream so that our sharp pipeline knows where to put the image

        return plateid;
    } catch (e) {
        console.log(e);
        return null;
    }
}

SVG图片

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="90" viewBox="0 -50 500 40">
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: LicensePlate;
          src: url('LicensePlate.ttf');
        }
      ]]>
    </style>
  </defs>

  <text x="0" y="0" font-family="LicensePlate" font-size="150" letter-spacing="10">
    Pl@T3#
  </text>
</svg>

精确字体

这里是一个链接到确切的字体我用http://www.fontspace.com/dave-hansen/license-plate