Javascript Chart.js-字体仅在重新加载画布后渲染

我正在使用Chart.js，我正在尝试使用谷歌字体。第一次加载页面时，图表使用默认字体，但如果重新创建图表，则会加载正确的字体

如何在第一次加载图表时加载字体

我的HTML：

<div style="width: 100%;" id="StatsDiv">
    <div id="container" style="position: relative; height:300px; width:600px; background-color:#F9F9F9; padding-top:10px;">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

---

图表不会在第一次加载你的字体，因为它找不到你的字体。但它第二次起作用，因为浏览器已经缓存了您的字体

如果要确保字体正常工作，可以使用隐藏的DOM预加载字体

.fontproload{
字体系列：“尽快压缩”；
位置：固定；
顶部：-9999px；
左：-9999px；
}

-

将图表呈现代码包装在

document.fonts.ready.中。然后

对我有效

在创建图表之前是否加载字体？如果字体还不存在，图表将不会使用它。我考虑过这一点，但是我们如何检查字体是否已加载？（是的，字体加载发生在创建字体之前）它似乎工作正常。这与您的设置有什么区别吗？

<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />

Chart.defaults.global.defaultFontFamily = 'Asap Condensed';

        var myChart = new Chart(document.getElementById("myChart"), {
            type: 'bar',
            data: {
                labels: [FundsLabel,RequestedLabel],
                datasets: [
                    {
                        label: "Cleared Balance: " + parseFloat(AVBalance).toFixed(2) + " AUD",
                        backgroundColor: "rgba(98,203,49,0.40)",
                        borderColor: "rgba(98,203,49,0.75)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(98,203,49,0.50)",
                        hoverBorderColor: "rgba(98,203,49,1.00)",
                        data: [AVBalance, GreenRequested],
                    },
                    {
                        label: "Pending Balance: " + parseFloat(PDBalance).toFixed(2) + " AUD",
                        backgroundColor: "rgba(231,76,60,0.40)",
                        borderColor: "rgba(231,76,60,0.75)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(231,76,60,0.50)",
                        hoverBorderColor: "rgba(231,76,60,1.00)",
                        data: [PDBalance, RedRequested],
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        stacked: true,
                        gridLines: {
                            display: true,
                            zeroLineColor: '#999999',
                            zeroLineWidth: '1',
                            // color: "rgba(255,99,132,0.2)",
                            color: "rgba(239, 239, 239)",
                        },
                          ticks: {
                              //  min: 0, // it is for ignoring negative step.
                              beginAtZero: true,
                              fontSize: "12",

                                // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                            }
                    }],
                    xAxes: [{
                        stacked: true,
                        gridLines: {
                            display: false,

                        },

                        barThickness: 120,
                         scaleLabel: {
                             display: true,
                            //labelString: 'Banks'

                        }
                    }]
                },
                maintainAspectRatio: false,

            }
        });