css - 如何禁用或覆盖网页中默认从 svg 继承的字体

Question

当我需要更改 Highcharts 的数据标签时，我遇到了这个问题。

fiddle 链接:click here

Highcharts.chart('container', {
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: [{
            name: 'DivisionA',
            value: 6,
            colorValue: 1
        }, {
            name: 'DivisionB',
            value: 6,
            colorValue: 2
        }, {
            name: 'DivisionC',
            value: 4,
            colorValue: 3
        }, {
            name: 'DivisionD',
            value: 3,
            colorValue: 4
        }, {
            name: 'DivisionE',
            value: 2,
            colorValue: 5
        }, {
            name: 'DivisionF',
            value: 2,
            colorValue: 6
        }, {
            name: 'DivisionG',
            value: 1,
            colorValue: 7
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

#container {
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

如果使用 Chrome，请尝试检查数据标签，例如DivisionA，你会发现它的字体继承自svg。我尝试使用 .highcharts-container {.. }, 更改字体并应用 css，但它不起作用。

如有任何帮助，我们将不胜感激。

Answer 1

您需要改为定位 text 元素(tspan 的父元素)。所以你可以试试这个:

.highcharts-label text {
    font-family: ...;
}