在SVG上使用Google字体< object> [英] Using Google Fonts with SVG <object>
问题描述
我在使用< object> 标记嵌入SVG到我的页面，他们应该使用Google字体（例如 Roboto ）。但是，SVG不会选择这些字体，而是默认为系统字体。
I'm embedding SVGs in my page with the <object> tag, and they're supposed to utilize Google Fonts (e.g. Roboto). However, the SVGs aren't picking these fonts up and instead default to system fonts.
我做错了什么？每个SVG需要字体本身嵌入< style> ？
What am I doing wrong? Does every SVG require that the font itself be embedded in <style>?
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
</body>
SVG代码段：
<text font-size="14" fill="#333" font-family="Roboto">Words go here</text>
推荐答案
浏览器将SVG文本视为常规HTML文本。换句话说，SVG中的任何文本元素都必须像普通HTML元素（例如< span> ）样式化。您需要以CSS @import 的形式在SVG中嵌入您的字体。通过您的SVG的XML查看< defs> 部分。然后，将此代码添加到它：
The browser treats SVG text as regular HTML text. In other words, any text elements in your SVG must be styled like normal HTML elements (like a <span>, for example). You need to embed your font in your SVG in the form of a CSS @import. Look through the XML of your SVG for the <defs> section. Then, add this code to it:
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
</style>
</defs>
接下来，更新< text> 元素如下：
Next, update your <text> element to be like this:
<text font-size="14" fill="#333" style="font-family: 'Roboto';">
Words go here
</text>
如果你想了解更多信息，你可以试试这个网站： http://nimbupani.com/about-fonts-in-svg.html 。它有一些很好的信息在嵌入的SVG中的字体。有关这方面的工作示例，请访问： https://github.com/marians/test -webfonts-in-svg 。
If you want more information about this, you might try this website: http://nimbupani.com/about-fonts-in-svg.html. It has some pretty good information on fonts in embedded SVGs. A working example of this can be found here: https://github.com/marians/test-webfonts-in-svg.
这篇关于在SVG上使用Google字体< object>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
