html – 跨浏览器嵌入字体在svg图像

发布时间：2020-12-14 19:32:09 所属栏目：资源来源：网络整理

导读：标题不明确让我澄清一下：我有一个svg图像,其中包含一个我想用自定义字体渲染的文本. 但是,当在html页面中嵌入字体时,似乎没有弹出新的问题.另外,一些浏览器(即Firefox)看起来像在直接渲染svg时一样处理页内svg(“in img tag”). defsstyle @font-face { fon

标题不明确让我澄清一下：我有一个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]");
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!