JS等效链接到字体文件

Question

我已经使用css以传统方式链接到字体文件，如下所示：

How can I use Google's Roboto font on a website?

然而，在某些情况下我可能需要更复杂的样式规则，在这种情况下我使用javascript。奇怪的是谷歌搜索只返回了css字体链接方法，但我怀疑js有办法。我得到了：

d3.select('body').append('text').text('my text')
    .attr('font-family', 'Roboto')
    .attr('src', 'url(my_url) format('truetype')');

但是我不确定它是否应该是这样的。鉴于它不起作用，我的预感是否定的。有什么想法吗？

Answer 1

只要您在文档中引用您的Google字体，如下所示：

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

您需要做的就是在选择font-family时指定名称以将其应用于任何文本元素：

d3.select('body').append('text').text('my text')
    .style('font-family', "'Montserrat', sans-serif");

小提琴 - https://jsfiddle.net/7jLgpx68/

＃对于.ttf个文件，我建议先在css中设置它，如下所示：

@font-face {
  font-family: "Super Sans";
  src: url(#url_to_ttf);
}

然后在你的js代码中使用它，如

d3.select('body').append('text').text('my text')
    .style('font-family', "Super Sans");

Answer 2

CSS是迄今为止最简单的方法。您可以随时使用JS操作包含使用不同类或id的文本的标记。