17

我想在嵌入网页的 svg 中使用自定义字体。使用 setattribute 我可以使用 Arial... 字体。我认为这些字体嵌入在浏览器中，我可以使用它。但是我该怎么做才能使用自定义字体呢？在 Firefox 中，当我在 css 中使用 @font-face ....

@font-face {

                font-family: "ITCGothicBold";
                src: url('fonts/ITCGothicBold.ttf') format("truetype");

}

该字体系列适用于 Html 网页。

另一方面，例如，在 svg 文本中：

<text xml:space="preserve" text-anchor="middle" font-family="ITCGothicBold.ttf" font-size="24" id="svg_1" y="72.83333" x="74.75" stroke-width="0" stroke="#000000" fill="#000000">HELLO</text>

我想以 ITCGothicBold.ttf 为例。使用 setattribute 我可以将 ITCGothicBold.ttf 放在 font_family 属性中，但没有任何改变：HELLO 文本没有改变。有谁知道如何使用嵌入网页的 svg 中的自定义字体？谢谢

注意：我使用的完整代码是：

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
    <defs>
  <style type="text/css">@font-face {

                font-family: "ITCGothicBold.ttf";
                src: url('fonts/ITCGothicBold.ttf') format("truetype");

}</style>
 </defs>
 <g>
  <title>Calque 1</title>
  <text fill="#000000" stroke="#000000" stroke-width="0" x="75.75" y="72.83333" id="svg_1" font-size="24" font-family="ITCGothicBold.ttf" text-anchor="middle" xml:space="preserve">HELLO</text>
 </g>
</svg>
4

2 回答 2

8

您可以像在 css 中一样更改 svgs 中的字体。

<style>
    @font-face {
        font-family: font;
        src: url(font.woff);
    }
    svg{
        font-family: font, fallBackFonts, sans-serif;
    }
</style

尽管我建议您更详细地定义它以获得更好的兼容性。这样您就可以提供各种后备方案。

@font-face { 
    font-family: 'font'; 
    src: url('font.eot');
    src: url('location/of/font.eot?#iefix') format('eot'), 
         url('location/of/font.woff') format('woff'), 
         url('location/of/font.ttf') format('truetype'), 
         url('location/of/font.svg#webfont') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
}

提供字体转换（用于 eot、woff、truetype 和 svg 文件）的服务是...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator

话虽这么说，如果您真的想在 svg 中分配字体，您将像您一样添加属性 font-family 。虽然我不会在命名方案中包含文件扩展名 (.ttf)。

于 2015-03-12T20:44:55.427 回答
4

以下是我从另一个 SVG 文件中引用 SVG 字体的方式：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">

  <defs>
    <font-face>
      <font-face-src>
        <font-face-uri href="file:///.../DejaVuSans.svg"/>
      </font-face-src>
    </font-face>
  </defs>

  <text x="0" y="400" font-family="DejaVu Sans" font-size="200">
    Abc
  </text>
</svg>
于 2017-05-25T17:36:59.513 回答