如何将标准的谷歌字体添加到D3.js svg文本元素

Question

如何将Google字体添加到d3文本元素，例如：

   g.append('text')
      .attr('x', width / 2)
      .attr('y', height / 3)
      .text('roboto')
      .style("font-family", "roboto")
      .style("font-size", "80px")
      .attr("fill", "grey");

这与以下针对自定义类型面孔

的问题分开

Using google fonts with d3.js and SVG

Answer 1

直接解决方案：

在布局的头部使用链接元素（如下所示）

 <link href='https://fonts.googleapis.com/css?family=Inconsolata:700' rel='stylesheet' type='text/css'>

这将导入有问题的字体，然后在您的svg元素中添加字体系列：

 svg.append('text')
      .text('Inconsolata')
      .style("font-family", "Inconsolata")