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
相关产品推荐
相关产品推荐

