Question

<script type="text/javascript" src="snap.svg-min.js"></script> <style> @font-face { font-family: Avenir; src: url("/AvenirNextCondensed-DemiBold.otf") format("opentype"); } </style> <script> window.onload = function(){ //Start with a simple raphaelJs drawing var s = Snap('#svg', 200,200); var r = s.rect(4,4,192,192,100,100).attr({ stroke: '#1A171B', 'strokeWidth': 4, fill: 'FFDD00', 'opacity': 1.0 }); var t1 = s.text((200/2),(200/2)+20, "150"); t1.attr({ 'font-size': 110, 'font-family': 'Avenir', fill:'#3D3C3F', 'text-anchor':'middle' }); var t2 = s.text((200/2),(200/2)+75, "ex"); t2.attr({ 'font-size': 80, 'font-family': 'Avenir', fill:'#3D3C3F', 'text-anchor':'middle' }); document.getElementById('img').src = s.toDataURL(); } </script> <svg id="svg"></svg> <img id="img"></img>

您好，

“svg”使用正确的font-family绘图，但“img”没有。请在此处查看结果：http://pictos.kagwalmina.fr/index3.html

我的代码是错误还是错误？

感谢您的帮助。

Answer 1

要使自定义字体有效，请务必使用“defs”标记将其添加到“svg”中

＆＃xA;＆＃xA;

示例：

＆＃xA;＆ #xA;

 ＆lt; defs＆gt;＆＃xA; ＆lt; font-face font-family =“Knewave”＆gt;＆＃xA; ＆LT;字体面-SRC＆GT;＆＃XA; ＆lt; font-face-uri link：href =“path_to_font / css / fonts / Knewave-Regular.ttf”＆gt;＆＃xA; ＆LT; /字体面-URI＆GT;＆＃XA; ＆LT; /字体面-SRC＆GT;＆＃XA; ＆LT; /字体面＆GT; ＆＃xA;＆lt; / defs＆gt;＆＃xA;

＆＃xA;＆＃xA;

现在当您将SVG转换为Image时，它应该显示该文本的正确字体

＆＃XA;

用自定义字体snapsvg到png

1 个答案: