javascript - IE8 中的 Google API 组合图表字体问题

Question

我在 IE8 中使用 Google API 的组合图表控件时遇到问题。我似乎无法为图表设置正确的字体。

这是我绘制图表的函数:(所有字体在这里明确调用，我也试图只在 iframe 属性上设置它(仅在 IE8 中使用))

    function drawChart() {
        var options = {
            fontName: 'Arial',
            slantedText: false,
            titleTextStyle: { fontName: 'Arial', slantedText: false },
            title: 'PLMs for Period',
            tooltip: { textStyle: { fontName: 'Arial', italic: false, fontSize: 24} },
            vAxis: { title: '# of PLM\'s', titleTextStyle: { fontName: 'Arial', slantedText: false, fontSize: '24', bold: true} },
            hAxis: { title: 'Plant Location', titleTextStyle: { fontName: 'Arial', slantedText: false, fontSize: '24', bold: true} },
            seriesType: "bars",
            series: { 5: { type: "line"} },
            backgroundColor: '#F2F2F2',
            titleTextStyle: { fontSize: '28' }
        };
        var arrayTable = google.visualization.arrayToDataTable(chartData);
        var chart = new google.visualization.ComboChart(document.getElementById('chart-container'));
        chart.draw(arrayTable, options);
    }

这是相关的 HTML 代码:

    <div id="report-container">
        <h3 id="period-information"></h3>
        <div id="report-content">
            <h3 id="InProgressStart-header"></h3>
            <div class="accordion-content" id="InProgressStart-content">
            </div>
            <h3 id="Launched-header"></h3>
            <div class="accordion-content" id="Launched-content">
            </div>
            <h3 id="Completed-header"></h3>
            <div class="accordion-content" id="Completed-content">
            </div>
            <h3 id="InProgressEnd-header"></h3>
            <div class="accordion-content" id="InProgressEnd-content">
            </div>
            <h3 id="Rejected-header"></h3>
            <div class="accordion-content" id="Rejected-content">
            </div>
        </div>
        <center><div id="chart-container" style="width: 100%; height: 500px;"></div></center>
    </div>

这是传入数据的示例:

    [
        ["Plant Location", "In Progress at Start", "Launched", "Completed", "In Progress at End", "Fully Rejected"],
        ["Example 1", 17, 6, 8, 15, 1],
        ["Example 2", 19, 5, 8, 14, 2],
        ["Example 3", 12, 6, 3, 14, 1]
    ]

以下是涉及字体的样式:

    iframe
    {
        font-family: "Arial, sans-serif";   
    }
    body {
        color: #333;
        font-size: 16px;
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        padding: 20px;
        margin: 0  auto;
        height: auto;
        max-width: 1200px;
        min-width: 500px;
        background: #F2F2F2;
    }

如果您需要更多信息，请告诉我。我自己做了一些研究，发现 IE 依赖于操作系统的字体，但它仍应正确呈现“Arial”。

Answer 1

我在 Google 网上论坛上找到了解决方法。在 Google API 可视化控件中输入 fontName 时，输入用双引号括起来的值，然后输入单引号。像这样:'"fontName"'，这使得它在 IE8 中正确呈现。 (在此处找到修复:https://groups.google.com/forum/#!topic/google-visualization-api/ESS5mDoqrc0)

Google 确实知道这个问题，但不打算修复它。这是谷歌的回应:“我们对此感到抱歉，但不知道该怎么办。IE <= 8 不支持 SVG，因此使用 VML。此外，IE 中的 VML 支持正在恶化，和字体处理特别有问题。IE9 终于支持 SVG，我认为这在那里工作得很好，但我们无法解决 IE <= 8 的问题。” (来自:https://code.google.com/p/google-visualization-api-issues/issues/detail?id=427)