标题不明确让我澄清一下：我有一个svg图像,其中包含一个我想用自定义字体渲染的文本.
但是,当在html页面中嵌入字体时,似乎没有弹出新的问题.另外,一些浏览器(即Firefox)看起来像在直接渲染svg时一样处理页内svg(“in img tag”).
<defs>
<style>
@font-face {
font-family: "Open Sans";
src: local("Open Sans"),local("OpenSans"),url('https://example.com/OpenSans-Regular.eot') format('eot'),url('https://example.com/OpenSans-Regular.woff') format('woff'),url('https://example.com/OpenSans-Regular.ttf') format('truetype');
}
/* ...
据我所知,如果这是一个网页,它将成功地遍布各地.然而,作为一个svg,我不能让它工作.当前的格式在IE10(大概是较旧的版本)中几乎无处不在：字体有时会加载,其他时候它不会.字面上每秒刷新使用系统后备字体.将woff文件作为base64编码文件内联,但可以将其分解为Safari(并且更改顺序无法解决).
在svg图像中是否有跨浏览器嵌入字体的固定方式？ (再次,我不是指在网页中嵌入svg字体,而是在svg图像中渲染嵌入的字体.)
解决方法
至少在Firefox中,图像必须是完全独立的,即一个文件
for privacy reasons中的所有内容.
如果要使字体正常工作,您必须对其进行base64编码并将其作为数据URL嵌入到SVG文件中,即
@font-face {
font-family: 'Open Sans';
src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}
