You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SVG中Press Start 2P字体无法加载的问题求助

SVG中Press Start 2P字体无法渲染的问题

我需要将以下SVG渲染为独立文件:

<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
    @font-face {
        font-family: 'Press Start 2P';
        src: url('https://fonts.googleapis.com/css?family=Press+Start+2P');
    }
    </style>
    <rect width="89" height="55" fill="black" />
    <rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
    <text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12" letter-spacing="0em">1234</text>
    <rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
    <rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
    <path d="M81.4286 51V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z" fill="#0000FF" />
</svg>

我尝试使用Press Start 2P字体,但无论本地打开SVG文件,还是通过以下Data URI方式,字体都无法渲染:

data:image/svg+xml,%3Csvg%20width%3D%2289%22%20height%3D%2255%22%20viewBox%3D%220%200%2089%2055%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%40font-face%20%7B%20%20%20%20%20%20%20%20font-family%3A%20%27Press%20Start%202P%27%3B%20%20%20%20%20%20%20%20src%3A%20url%28%27https%3A//fonts.googleapis.com/css%3Ffamily%3DPress%2BStart%2B2P%27%29%3B%20%20%20%20%7D%20%20%20%20%3C/style%3E%20%20%20%20%3Crect%20width%3D%2289%22%20height%3D%2255%22%20fill%3D%22black%22%20/%3E%20%20%20%20%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2278%22%20height%3D%2244%22%20fill%3D%22%230000FF%22%20/%3E%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2244.5%22%20y%3D%2231%22%20fill%3D%22%20white%22%20font-family%3D%22Press%20Start%202P%22%20font-size%3D%2212%22%20letter-spacing%3D%220em%22%3E1234%3C/text%3E%20%20%20%20%3Crect%20x%3D%2278%22%20y%3D%2245%22%20width%3D%229%22%20height%3D%228%22%20fill%3D%22%23FF4F0A%22%20/%3E%20%20%20%20%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2278%22%20height%3D%2244%22%20stroke%3D%22%23FF4F0A%22%20stroke-width%3D%223%22%20/%3E%20%20%20%20%3Cpath%20d%3D%22M81.4286%2051V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z%22%20fill%3D%22%230000FF%22%20/%3E%3C/svg%3E

编辑补充

根据建议,我尝试将完整字体以Base64编码嵌入SVG(编码内容来自.ttf文件转换),但问题依旧:

<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
        @font-face {
            font-family: "Press Start 2P";
            src: url(data:application/font-woff;charset=utf-8;base64,..) format("woff");
            font-weight:normal;font-style:normal;
        }
    </style>
    </defs>
    <rect width="89" height="55" fill="#E5E5E5" />
    <rect width="89" height="55" fill="#29296E" />
    <rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
    <text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12">
    {}azer
    </text>
    <rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
    <rect x="47" y="45" width="41" height="8" fill="#FF4F0A" />
    <text text-anchor="end" x="86" y="52" fill=" white" font-family="Press Start 2P" font-size="8" letter-spacing="0em">
    {}
    </text>
</svg>

内容的提问来源于stack exchange,提问作者ClementWalter

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 17:45:42