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

问题描述

标题不明确;让我澄清：我有一个svg图像，其中包括我想要用自定义字体呈现的文本。

但是，似乎有新问题，不会弹出时在html页面中嵌入字体。此外，某些浏览器（即Firefox）似乎与直接渲染svg的方式不同，它不同于页面内的svg（位于 img 标签）。

$ b

 < defs> 
< style> 
 @ font-face {
 font-family：Open Sans; 
 src：local（Open Sans），
 local（OpenSans），
 url（'https://example.com/OpenSans-Regular.eot'）format（' （'https://example.com/OpenSans-Regular.woff'）格式（'woff'），
 url（'https://example.com/OpenSans- Regular.ttf'）格式（'truetype'）; 
 
 
 code 
 $ b $ p $据我所知，如果这是一个网页，几乎可以在任何地方成功呈现。但是，作为一个svg，我不能得到它的工作。目前的格式除了在IE10（大概是旧版本）之外几乎在任何地方工作：字体有时会加载，而其他时间则不会。从字面上看，每秒刷新使用系统后备字体。包括内联的woff文件作为一个base64编码文件的作品，但它打破了Safari浏览器（和改变顺序不能解决它）。
 
 
有一个坚实的十字路口浏览器嵌入字体在SVG图像？ （同样，我不是说在网页中嵌入svg字体，而是在svg图像中嵌入字体。）
 
解决方案
至少在Firefox中，图片必须是完全独立的，也就是说一切都在一个文件中出于隐私的原因如果你想使用这些字体，你必须对它们进行base64编码并将它们作为一个数据URL嵌入到SVG文件中，也就是
。
  @ font-face {
 font-family：'Open Sans'; 
 src：url（data：application / x-font-ttf; base64，[base-encoded font here]）; 
} 
  
 
The title is ambiguous; let me clarify: I have an svg image which includes a text I want rendered with a custom font.

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');
    }
    /* ...
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).

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.)
解决方案
In Firefox at least, images must be completely self-contained i.e. everything in one file for privacy reasons.

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