Google SVG 中的字体源 url

Question

我运行在将 google 字体 url 添加到 SVG 时出现解析错误。

字体是'NunitoSans-Regular'，我用的url是：

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

浏览器returns这个错误：

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' 一起使用时使用。

Google SVG 中的字体源 url

Google font src url in SVG

svg

google-fonts