将 google 字体与 d3.js 和 SVG 结合使用

Question

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

<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，但不保留所有其他属性。如何获得一个类中的新字体和其他属性？

Answer 1

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

    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');");

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

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');

希望这可以帮助！