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

Question

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

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

• 使用嵌套在 SVG 元素中的样式块，
• 在文本和文本范围中使用字体系列属性，
• 使用内联样式，
• 使用 CSS 的选择器，甚至将 wildcare 与 CSS 一起使用 ！important 属性

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

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

这是我的 ReactJS 的片段：

从"反应"导入反应;

导出默认值 (( => (

<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

根据您的Github 存储库，我相信问题是由于 Next.js 没有为您的"字体"目录提供服务。静态资产需要从名为"static"、"public"或"src/public"目录的目录提供(最后两个需要 Next.js 9.1 或更高版本(。

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

Answer 2

另外，我还想补充一下Peter T Bosse II的答案，在我的情况下，True Type Font的字体版本不适用于Firefox，但适用于其他浏览器，所以我必须管理字体的扩展选择，以便它也可以在Firefox中使用。

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

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

现在我已经将WOFF和WOFF2版本的字体放在了我的@font面导入的顶部，它在 Firefox 上也能很好地工作。

浏览器使用 WOFF 的文件 - 意思是 WOFF1 标准的WOFF扩展版本 - 它位于@font面导入的顶部，因此根据我的开发控制台网络的退款，它是第一个加载的字体。