svg 图像中的跨浏览器嵌入字体 [英] Cross-browser embedded font in svg image

问题描述

标题不明确；让我澄清一下:我有一个 svg 图像，其中包含我想用自定义字体呈现的文本.

The title is ambiguous; let me clarify: I have an svg image which includes a text I want rendered with a custom font.

但是，在html页面中嵌入字体时似乎没有弹出新问题.此外，某些浏览器(即 Firefox)似乎对页内 svg(在 img 标签中")的处理方式与直接呈现 svg 时不同.

However, there seem to be new issues that do not pop up when embedding fonts in html page. Also, some browsers (namely Firefox) seem to treat in-page svg ("in a img tag") differently than when rendering the svg directly.

<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 来说这会破坏它(并且更改顺序并不能修复它).

As far as I know, if this was a web page it would render successfully across pretty much everywhere. However, as an svg, I can't get it to work. The current format works pretty much everywhere except in IE10 (and presumably older versions): the font sometimes loads, other time it doesn't. Literally every second refresh uses the system fallback font. Including the woff file inline as a base64 encoded file works, but that breaks it for Safari (and changing order does not fix it).

在 svg 图像中是否有一种可靠的跨浏览器嵌入字体的方法?(同样，我的意思不是在网页中嵌入 svg 字体，而是在 svg 图像中渲染嵌入的字体.)

Is there a solid way of cross browser embedded fonts in svg image? (Again, I don't mean embedding svg font in a web page, but rendering embedded font inside an svg image.)

推荐答案

至少在 Firefox 中，图像必须完全独立，即所有内容都在一个文件中 出于隐私原因.

In Firefox at least, images must be completely self-contained i.e. everything in one file for privacy reasons.

如果你想让字体工作，你必须对它们进行 base64 编码并将它们作为数据 URL 嵌入到 SVG 文件中，即

If you want the fonts to work you'll have to base64 encode them and embed them as a data URLs in the SVG file i.e.

@font-face {
    font-family: 'Open Sans';
    src: url("data:application/x-font-ttf;base64,[base-encoded font here]");
}

这篇关于svg 图像中的跨浏览器嵌入字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！