自定义字体在SVG [英] Custom Font in svg

问题描述

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

$ p $ @ font-face {

font-family：ITCGothicBold;
src：url（'fonts / ITCGothicBold.ttf'）格式（truetype）;

font-family在Html网页中工作。 / p>

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

 < text xml：space =preservetext-anchor =middlefont-family =ITCGothicBold.ttffont-size =24id =svg_1y =72.83333x =74.75stroke -width =0stroke =＃000000fill =＃000000> HELLO< / text> 
  

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

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

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

font-family：ITCGothicBold.ttf;
src：url（'fonts / ITCGothicBold.ttf'）格式（truetype）;

}< / style>
< / defs>
< g>
< title> Calque 1< / title>
< / g>
< / svg>


解决方案

您可以在svgs中更改字体css。

 < style> 
 @ font-face {
 font-family：font; 
 src：url（font.woff）; 
} 
 svg {
 font-family：font，fallBackFonts，sans-serif; 
 
   

虽然我建议您定义更多详细地说为了更好的兼容性。这样你可以提供各种后备。

pre $ font-family： ;
src：url（'font.eot'）;
src：url（'location / of / font.eot？#iefix'）format（'eot'），
url（'location / of / font.woff'）format（'woff'） ，'b $ b 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）。

I would like to use custom fonts in a svg embedded in a web page. With setattribute I can use Arial... fonts. I think those fonts are embedded in the browser and I can use it. But how can I do to use custom fonts? In Firefox, when I use in css for exemple @font-face ....

@font-face {

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

}

that font-family works in a Html web page.

On the other hand, for exemple, in the svg text:

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

I would like to use for exemple ITCGothicBold.ttf. Using setattribute I can put ITCGothicBold.ttf in the font_family attribute but nothing change: the HELLO text is not changing. Does anyone know how to work with custom font in svg embedded in a web page? Thanks

NOTE: The full code I have used is:

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

解决方案

You can change fonts in svgs just as you do in css.

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

Though I would suggest you define it more verbosely for better compatibility. That way you can provide a variety of fallbacks.

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

Services that provide font conversions (for the eot, woff, truetype, and svg files) are...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator

That being said, if you REALLY want to assign the font IN the svg you would add the attribute font-family just like you have. Though I wouldn't include the file extension (.ttf) in the naming scheme.

这篇关于自定义字体在SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！