在 d3.js 和 SVG 中使用谷歌字体答案

【问题标题】：Using google fonts with d3.js and SVG在 d3.js 和 SVG 中使用谷歌字体
【发布时间】：2014-01-28 08:06:15
【问题描述】：

我正在尝试使用来自谷歌字体的自定义字体：

<link href='http://fonts.googleapis.com/css?family=Karla|Quantico|Audiowide' rel='stylesheet' type='text/css'>

我已经将它们与这个 css 一起用于普通文本：

.customFont{
  font-family: 'Karla' ;
}

<h1 class="customFont"> My text </h1>

但是，当我尝试在 SVG 文本元素（例如图形中的节点文本）中添加这种带有 d3.js 的字体时，它会删除我尝试添加到类中的所有其他样式：

.customFont {
  font-family: 'Karla' ;
  font-weight : bold;
  pointer-events: none;
  stroke:#fff;
  stroke-width:1px;
  fill-opacity: 1;
  fill: #000;
}

它将字体系列更改为自定义 Karla，但不会保留所有其他属性。如何在一个类中获取新字体和其他属性？

【问题讨论】：

你能告诉我们你用来设置字体的代码吗？

标签： css svg d3.js

【解决方案1】：

简单地添加链接

<head>
href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>

接下来，只需添加 css。

.axis text {
fill: #2b2929;
font-family: 'Roboto Condensed';
font-size: 120%;
}

这对我有用。

【讨论】：

【解决方案2】：

我可以通过添加一个<defs> 标签并在我的 SVG 顶部添加一个<style type="text/css"> 标签来实现这一点。然后，您可以将文本添加到样式标签并导入您的谷歌字体，如下所示：

    var root = d3.select(element)
                 .append('svg')
                 .attr('xmlns', 'http://www.w3.org/2000/svg')
                 .attr('xmlns:xmlns:xlink', 'http://www.w3.org/1999/xlink')
                 .attr('version', '1.1')
                 .attr('xml:space', 'preserve')
                 .attr('height', '100%')
                 .attr('width', '100%')
                 .attr('viewBox', '0 0 0 0');

        root.append('defs')
            .append('style')
            .attr('type', 'text/css')
            .text("@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800');");

我是在我正在开发的 Angular 应用程序中执行此操作的，但这并不重要。这可以应用于任何 D3 示例。剩下要做的就是在 SVG 中获取 <text> 标签，并对其应用适当的字体样式（字体系列、字体大小、字体粗细等）：

var svg = root.append('g').attr('class', 'root');

    svg.append('text')
       .text(scope.$parent.heading)
       .attr('text-anchor', 'middle')
       .style('font-size', '14px')
       .style('font-family', '"Open Sans", sans-serif')
       .style('font-weight', '500');

希望这会有所帮助！

【讨论】：

【解决方案3】：

看起来问题与未设置字体大小有关。字体大小在元素和 html 元素中的默认值不同。如果您尝试将外观从 html 元素（在您的情况下为）复制到元素，您可能也不需要设置填充笔触。

<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Karla|Quantico|Audiowide' rel='stylesheet' type='text/css'>
    <style>
        .customFont {
          font-family: 'Karla' ;
          font-weight : bold;
          pointer-events: none;
          stroke:#fff;
          stroke-width:1px;
          fill-opacity: 1;
          fill: #000;
        }
        .customFont1 {
          font-family: 'Karla';
          font-size: 28px;
          font-weight : bold;
          pointer-events: none;
          fill-opacity: 1;
          fill: #000;
        }
    </style>
</head>
<body>
    <h1 class="customFont"> My text </h1>
    <h1 class="customFont1"> My text </h1>
    <div>
        <svg>
            <g>
                <text x="0" y="20" class="customFont">My text</text>
            </g>
            <g>
                <text x="0" y="50" class="customFont1">My text</text>
            </g>
        </svg>
    </div>
</html>

这是一个jsfiddle，显示了一些比较。

它不包括 d3，但它确实使用了 svg，这最终是 d3 创建的。

【讨论】：