问题描述
我正在尝试使用Google字体中的自定义字体:
I'm trying to use a custom type face from google fonts:
<link href='http://fonts.googleapis.com/css?family=Karla|Quantico|Audiowide' rel='stylesheet' type='text/css'>
我将它们与此CSS一起用于普通文本:
I have used them with this css for normal text:
.customFont{
font-family: 'Karla' ;
}
<h1 class="customFont"> My text </h1>
但是,当我尝试在SVG文本元素(例如图形中的节点文本)中使用d3.js添加这种类型的面孔时,它将删除我尝试添加到该类中的所有其他样式:
But when I try to add this type face with d3.js in SVG text elements (e.g. node text in a graph) it removes all other styling I try to add to the class:
.customFont {
font-family: 'Karla' ;
font-weight : bold;
pointer-events: none;
stroke:#fff;
stroke-width:1px;
fill-opacity: 1;
fill: #000;
}
它将字体系列更改为自定义的Karla,但未保留所有其他属性.如何在一个类中获得新类型的face和其他属性?
it changes the font-family to the custom Karla but it doesn't keep all the other properties. How can I get the new type face and the other properties in one class?
推荐答案
我能够通过在我的SVG顶部的顶部添加<defs>
标签并在其中添加<style type="text/css">
标签来实现此目的.然后,您可以将文本添加到样式标签中,然后导入Google字体,如下所示:
I was able to accomplish this by adding an <defs>
tag and appending a <style type="text/css">
tag within in that at the top of my SVG. You can then add text to the style tag and import your google fonts like so:
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中,并对其应用适当的字体样式(字体系列,字体大小,字体粗细等):
I did this within an angular application I was working on, but that doesn't matter. This can be applied to any D3 example. All thats left to do is to take your <text>
tags in your SVG and apply the appropriate font styles to them (font-family, font-size, font-weight, etc etc):
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');
希望这会有所帮助!
这篇关于在d3.js和SVG中使用Google字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!