# 字体

¥Fonts

有特殊的全局设置可以更改图表上的所有字体。这些选项在 Chart.defaults.font 中。全局字体设置仅在配置中未包含更具体的选项时才适用。

¥There are special global settings that can change all the fonts on the chart. These options are in Chart.defaults.font. The global font settings only apply when more specific options are not included in the config.

例如,在此图表中,除图例中的标签外,文本的字体大小为 16px。

¥For example, in this chart, the text will have a font size of 16px except for the labels in the legend.

Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 14
                    }
                }
            }
        }
    }
});
名称 类型 默认 描述
family string "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 所有文本的默认字体系列,遵循 CSS 字体系列选项。
size number 12 文本的默认字体大小(以像素为单位)。不适用于 radialLinear 刻度点标签。
style string 'normal' 默认字体样式。不适用于工具提示标题或页脚。不适用于图表标题。遵循 CSS 字体样式选项(即正常、斜体、倾斜、初始、继承)。
weight normal | bold | lighter | bolder | number undefined 默认字体粗细(粗体)。(见 MDN (opens new window))。
lineHeight number|string 1.2 单个文本行的高度(参见 MDN (opens new window))。

# 缺少字体

¥Missing Fonts

如果为系统中存在的图表指定字体,浏览器将不会在设置时应用该字体。如果你注意到图表中出现奇怪的字体,请检查你正在应用的字体是否存在于你的系统中。有关详细信息,请参阅 问题 3318 (opens new window)

¥If a font is specified for a chart that does exist on the system, the browser will not apply the font when it is set. If you notice odd fonts appearing in your charts, check that the font you are applying exists on your system. See issue 3318 (opens new window) for more details.

# 加载字体

¥Loading Fonts

如果字体未缓存且需要加载,则在加载字体后需要更新使用该字体的图表。这可以使用 字体加载 API (opens new window) 来完成。有关详细信息,请参阅 问题 8020 (opens new window)

¥If a font is not cached and needs to be loaded, charts that use the font will need to be updated once the font is loaded. This can be accomplished using the Font Loading APIs (opens new window). See issue 8020 (opens new window) for more details.