如何在Firefox中为svg的文本元素导入自定义字体？

Question

我在使用NextJs，codesandbox.io和stackblitz.com的网络服务器上，这使我无法在其云界面AFAIK上下载字体。我创建了一个Github存储库，因此您可以自己在本地测试代码。这里的链接：https://github.com/Hocoh/svg_font_firefox/blob/master/README.md

我将导入自定义字体，以在Firefox中用于SVG的文本元素，我将其用作剪切路径以对其上的面板进行动画处理，以实现发现文本效果。为了简单起见，在我的示例中，我仅集成了一个面板。在实际示例中，有五个面板。当前渲染无法在我的页面中实现自定义字体。要导入我的customFont，我尝试过：

• 使用嵌套在SVG元素中的样式块，
• 在文本和文本跨度中使用font-family属性，
• 使用内联样式，
• 与CSS的选择器一起使用，甚至可以将带！important属性的Wildcare与CSS一起使用]

它们都不起作用，在Firefox中，我显示的字体是原始字体。我也找不到关于SVG元素的自定义字体导入的一致文档。 [如果我了解得很好，Firefox会严格遵守SVG规范，并且可以解释为什么我的代码在Google Chrome和Opera中能很好地工作-例如，严格遵守以上规定，只有普通的普通CSS和选择器-并会失败Firefox。

如何在SVG文本元素上显示自定义字体？

这里是我的ReactJS的代码段：

从“反应”导入React；

导出默认（）=>（

 <svg 

    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%"
    // viewBox="50% 50% 20% 20%"
>

    {/* define style in SVG scope */} 
    <defs>
        {/* work when importing external  stylesheet
             <style type="text/css"> 
                {` 
                   @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
                `}
            </style>
        */}

        {/* fail on local font's importing*/}

        {/* fail using relative path
            <style type="text/css"> 
                {` 
                    @font-face{
                        font-family:AnuDaw;
                        src:
                            url("../font/Anud/AnuDaw.ttf") format("truetype"),
                            url("../font/Anud/AnuDaw.woff") format("woff"),
                            url("../font/Anud/AnuDaw.woff2") format("woff2"),
                            url("../font/Anud/AnuDaw.eot"),
                            url("../font/Anud/AnuDaw.eot?#iefix") format('embedded-opentype'),
                            url("../font/Anud/AnuDaw.svg")  format('svg');
                    }
                    text{
                        font-family: AnuDaw;
                        font-size:3em;
                    }
                `}
            </style>
        */}

        {/* fail using root path*/}
         <style type="text/css"> 
            {` 
                @font-face{
                    font-family:AnuDaw;
                    src:
                        url("../font/Anud/AnuDaw.ttf") format("truetype"),
                        url("../font/Anud/AnuDaw.woff") format("woff"),
                        url("../font/Anud/AnuDaw.woff2") format("woff2"),
                        url("../font/Anud/AnuDaw.eot"),
                        url("../font/Anud/AnuDaw.eot?#iefix") format('embedded-opentype'),
                        url("../font/Anud/AnuDaw.svg")  format('svg');
                }
                text{
                    font-family: AnuDaw;
                    font-size:3em;
                }
            `}
        </style>
    </defs>
    <defs> 
        <g  
            className="text_group"        
            id="panel_animation"
           // style={{fontFamily:"AnuDaw"}}
            y="0"

        >
             <text   
                    wordSpacing="-.45em"    
                    fontFamily="AnuDaw"
                >
                <tspan  x="0%" y="0%"  
                    dy="1.6em"   
                    >So</tspan> 
                <tspan  x="0%" y="-5%" 
                    dy="3em"  
                    fontFamily="AnuDaw">Food</tspan>
                </text> 

        </g>
    </defs> 

    <use
        width="100%" height="100%" 
        x="50%"
        xlinkHref="#panel_animation"                      
    /> 
</svg>    
  )

我在使用NextJs，codesandbox.io和stackblitz.com的网络服务器上，这使我无法在其云界面AFAIK上下载字体。我创建了一个Github存储库，因此您可以在...

Answer 1

基于your Github repo，我相信问题是由于Next.js无法提供您的“ font”目录。静态资产需要从名为“ static”，“ public”或“ src / public”的目录（最后两个require Next.js 9.1 or later）中提供。

我有submitted a PR，似乎可以解决您所描述的问题，至少在我的测试中。如果仍不能解决您的问题，请随时与我们联系，我们很乐意为您提供进一步的帮助。

Answer 2

此外，我还要在Peter T Bosse II的答案中加上True Type字体