SVG 中的 Google 字体 src url

Question

在将 google 字体 URL 添加到 SVG 时遇到解析错误。

字体是“NunitoSans-Regular”，我使用的网址是：

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');

这是相关的 SVG 标记：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 376 150" style="enable-background:new 0 0 376 150;" xml:space="preserve">
<style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
    .st0{fill:#EFC7C7;}
    .st1{fill:#90EEE1;}
    .st2{fill:#F15641;}
    .st3{display:none;}
    .st4{display:inline;}
    .st5{font-family:'NunitoSans-Regular';}
    .st6{font-size:45px;}
</style>

浏览器返回此错误：

Answer 1

独立的 SVG 文件不是由（宽容的）HTML 解析器解析的，而是由 XML 解析器解析的。 （顺便说一句，这与您是否将 XML 序言引用为第一行无关。）后者在它认为“格式正确”的内容上更具限制性。在您的情况下，它期望 & 是 entity reference 的开头。

您可以通过将<style> 元素的内容转义为CDATA section 来避免此错误：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 376 150" style="enable-background:new 0 0 376 150;" xml:space="preserve">
<style type="text/css"><![CDATA[
    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
    .st0{fill:#EFC7C7;}
    .st1{fill:#90EEE1;}
    .st2{fill:#F15641;}
    .st3{display:none;}
    .st4{display:inline;}
    .st5{font-family:'Nunito Sans';}
    .st6{font-size:45px;}
]]></style>

</svg>

请注意，您必须使用正确的font-family 名称：如果您的请求为family=Nunito+Sans，则该字体仅在与font-family: 'Nunito Sans' 一起使用时才会使用。