Linux浏览器下Highchart图例渲染异常及自定义字体添加咨询

Hey there, let's tackle that legend rendering glitch you're seeing on Linux browsers. The culprit is indeed likely the font family mismatch—Linux systems often don't have the same default fonts as Windows or macOS, so explicitly setting a custom font family for the legend should resolve this.

Here's how to update your existing Highcharts configuration:

Step 1: Add fontFamily to the Legend's itemStyle #

Modify your legend configuration to include the fontFamily property. You can specify your custom font first, followed by system fallback fonts to ensure things still look right if your custom font doesn't load.

title: { 
  text: c, 
  widthAdjust: -180 
}, 
tooltip: { 
  pointFormat: '{series.name}: <b>{point.y}</b>' 
}, 
legend: { 
  itemStyle: { 
    width:'100px', 
    color: '#666', 
    textOverflow: 'ellipsis', 
    overflow: 'hidden',
    // Add your custom font family here
    fontFamily: '"Open Sans", Roboto, Arial, sans-serif'
  } 
}

Step 2: (If Using a Custom Non-System Font) Declare the Font in CSS #

If you're using a custom font that isn't pre-installed on Linux systems, you need to first load it using @font-face in your CSS. For example:

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
       url('/fonts/open-sans-v34-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text remains visible during font load */
}

Make sure the file paths point correctly to your font files, and use modern formats like WOFF2 for better performance and browser support.

Key Notes #

• Always include fallback fonts (like Arial or sans-serif) so if your custom font fails to load, the browser will use a safe system font instead of defaulting to something that causes rendering issues.
• Linux browsers tend to prioritize system fonts, so testing your chosen font on a Linux environment (or using browser dev tools to emulate Linux font rendering) can help confirm the fix works.

内容的提问来源于stack exchange，提问作者Alfin Paul