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

我在一个Web服务器上使用NextJs、codesandbox.io和stackblitz.com阻止我在他们的云界面上下载字体。我已经创建了一个Github repo，这样您就可以在本地测试代码了。链接如下：

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

• 使用嵌套在SVG元素中的样式块
• 在文本和文本范围中使用字体族属性
• 使用内联样式
• 使用CSS的选择器，甚至使用带有CSS的通配符！重要属性

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

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

下面是我的ReactJS代码片段：

从“React”导入React

导出默认值（）=>(

{/*在SVG范围内定义样式*/}
{/*导入外部样式表时工作
{` 
@导入url（'https://fonts.googleapis.com/css?family=Dancing+脚本&显示=swap'）；
`}
*/}
{/*本地字体导入失败*/}
{/*使用相对路径失败
{` 
@字体{
字体系列：AnuDaw；
src:
url（“../font/Anud/AnuDaw.ttf”）格式（“truetype”），
url（“../font/Anud/AnuDaw.woff”）格式（“woff”），
url（“../font/Anud/AnuDaw.woff2”）格式（“woff2”），
url（“../font/Anud/AnuDaw.eot”），
url（../font/Anud/AnuDaw.eot？#iefix）格式（'embedded-opentype'），
url（“../font/Anud/AnuDaw.svg”）格式（'svg'）；
}
正文{
字体系列：AnuDaw；
字号：3em；
}
`}
*/}
{/*使用根路径失败*/}
{` 
@字体{
字体系列：AnuDaw；
src:
url（“../font/Anud/AnuDaw.ttf”）格式（“truetype”），
url（“../font/Anud/AnuDaw.woff”）格式（“woff”），
url（“../font/Anud/AnuDaw.woff2”）格式（“woff2”），
url（“../font/Anud/AnuDaw.eot”），
url（../font/Anud/AnuDaw.eot？#iefix）格式（'embedded-opentype'），
url（“../font/Anud/AnuDaw.svg”）格式（'svg'）；
}
正文{
字体系列：AnuDaw；
字号：3em；
}
`}
所以
食物
)

基于，我认为问题是由于Next.js没有为您的“font”目录提供服务。静态资产需要从名为“Static”、“public”或“src/public”的目录（最后两个）提供服务

---

至少在我的测试中，我发现这似乎解决了您描述的问题。如果它不能解决您的问题，请随时联系我，我很乐意进一步提供帮助。

此外，我还想补充一下Peter T Bosse II的答案，在我的例子中，True Type字体的字体版本不适用于Firefox，而适用于其他浏览器，因此，我必须管理字体的扩展选择，使其在Firefox中也能工作

目前我不知道为什么True Type字体的字体版本在Firefox中不起作用。也许如果我重新编译，True Type字体的字体版本现在也可以与Firefox一起使用

同时，我简单地将WOFF和WOFF2版本的字体放在@font face导入的顶部-导入似乎在第一次遇到可能是为了性能优化的文件时停止，因此它没有测试浏览器与其他字体的兼容性

现在，我已经将WOFF和WOFF2版本的字体放在@font-face导入的顶部，它在Firefox上也可以正常工作

---

浏览器使用WOFF的文件（即WOFF1标准版本的WOFF扩展名），该文件位于@font-face导入的顶部，因此是根据我的devconsole网络反馈的第一个加载的字体。

您是通过web服务器显示的，而不仅仅是文件系统上的文件，不是吗？这不是react片段，它只是一个SVG文件。@RobertLongson谢谢你的回答，是的，我在一个Web服务器上，使用NextJs、codesandbox.io和stackblitz.com阻止我在他们的云界面上下载字体。我已经创建了一个Github repo，这样您就可以在本地测试代码了。这里是链接：这是内联SVG吗？您是否尝试在html中添加样式标记？@jcubic感谢您的评论，是的，我认为这是内联SVG，是的，我尝试在SVG的文本元素中添加样式标记，您检查我提供的repo中，所有代码都在这里，我的意思是添加到html而不是SVG中，在html文件的头部使用，但使用选择器

svg text

似乎它在我的计算机上也能工作，我会玩一下，谢谢：）。

 <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>    
  )