自定义 SVG 字体答案

【问题标题】：Custom SVG Fonts自定义 SVG 字体
【发布时间】：2017-10-13 15:25:58
【问题描述】：

我的问题是关于在 SVG 文件中使用自定义字体在网站上显示徽标。我遇到了很大的困难，使用多个选项来使字体工作，因为它们没有显示在实时网站上。但是，它们确实在本地工作。

我用来显示 SVG 徽标的 HTML 标记是：

<svg width="263" height="26">
    <image xlink:href="/images/header-logo.svg" src="/images/fallback.png" width="263" height="26" />
</svg>

对于 SVG 字体，我将以下内容放在 SVG 文件本身的部分中。

<style type="text/css">
    @font-face {
        font-family: 'Font-Name';
        font-weight: 500;
    font-style: normal;
        src: url('fonts/My-Chosen-Font.woff') format('woff');
    }

    #text {
        font-family: 'Font-Name';
        font-weight: 700;
        fill: #424242;
        }
</style>

对于元素：

<text font-size="34">
    <tspan x="29" y="34" id="text" style="font-family: 'Font-Name';">Company</tspan>
</text>

非常感谢任何帮助，在此先感谢。

【问题讨论】：

您的问题可能是几件事之一。您需要提供更多信息。您列出的第一个 SVG 是内联在 HTML 页面中，还是独立的外部“.svg”文件？如果是后者，您的 Web 服务器是否使用正确的 Content-type (image/svg+xml) 提供 SVG 文件？如果是内联的，您使用的是哪个浏览器？你试过其他人吗？这可以提供一个线索。您也很有可能遵守浏览器隐私规则。请参阅 SVG2 规范的 Secure static mode 部分。

标签： css svg fonts font-face

【解决方案1】：

我已经创建了一支似乎可以工作的 Pen——如果这有帮助，请告诉我。它基于https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan 的页面。

<?xml version="1.0"?>
<svg width="290" height="40" viewBox="0 0 250 40"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <style>
<![CDATA[
text{
  font: 34px 'Ravi Prakash', cursive;
}
]]>
  </style>

  <text  x="29" y="34" id="text">Company</text>
  </text>
</svg>
<p>Read all about it.</p>

CSS：

@import url('https://fonts.googleapis.com/css?family=Ravi+Prakash');
html {
  font-family: 'Ravi Prakash', cursive;
}

【讨论】：

嗨 WahhabB，感谢您的回复。不幸的是，我们使用的字体在 Google 字体上不可用，因此使用“src: url('fonts/My-Chosen-Font.woff') format('woff');”，我开始认为使用SVG格式可能不支持像这样的外部字体？这是一个正确的假设，还是最好改用 PNG 或 Google 字体？

【解决方案2】：

如果您使用任何外部链接，例如图像或字体，您必须声明您的 SVG 具有链接功能。

 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
 >

* <html> 标签内的 SVG 不需要此规范。

【讨论】：