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

Question

我在使用 NextJs、codesandbox.io 和 stackblitz.com 的网络服务器上阻止我在他们的云接口(interface) AFAIK 上下载字体。我已经创建了一个 Github 存储库，因此您可以在本地自行测试代码。这里的链接:https://github.com/Hocoh/svg_font_firefox/blob/master/README.md

我将导入自定义字体以在 Firefox 中用于 SVG 的文本元素，我将其用作剪辑路径以在其上设置动画面板以实现发现文本效果。为了简单起见，我在我的示例中只集成了一个面板，但实际示例中有五个面板。当前渲染无法在我的页面中实现自定义字体。 要导入我的自定义字体，我已尝试:

• 使用嵌套在 SVG 元素中的样式 block ，
• 在文本和文本跨度中使用 font-family 属性，
• 使用内联样式，
• 尝试使用 CSS 的选择器，甚至将 wildcare 与带有 !important 属性的 CSS 一起使用

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

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

这是我的 ReactJS 片段:

从“ react ”导入 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>    
  )

Answer 1

基于 your Github repo ，我认为问题是由于 Next.js 没有为您的“字体”目录提供服务。需要从名为“static”、“public”或“src/public”目录(最后两个 require Next.js 9.1 or later )的目录提供静态 Assets 。

我已经 submitted a PR这似乎解决了您所描述的问题，至少在我的测试中是这样。如果它不能解决您的问题，请随时联系我们，我们很乐意进一步提供帮助。