将 Google Fonts 与 SVG <object> 结合使用

本文介绍了将 Google Fonts 与 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 都要求将字体本身嵌入到中?

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 元素类似(例如，).您需要以 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>

接下来，将您的元素更新为如下所示:

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.

这篇关于将 Google Fonts 与 SVG <object> 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！