移动端Xamarin内置浏览器中Dygraphs使用Olney字体问题咨询

云原生阿岚

2026-9-28

解决方案

首先在承载图表的HTML页面中声明自定义字体，Xamarin原生嵌入的字体无法直接被WebView内的网页上下文识别，需单独通过@font-face注册：

@font-face {
  font-family: 'Olney';
  /* Android场景下字体放在Assets/fonts目录时的路径写法 */
  src: url('file:///android_asset/fonts/Olney.otf') format('opentype');
  /* iOS场景下如果字体放在主Bundle，直接写字体文件名即可：src: url('Olney.otf') format('opentype'); */
  font-weight: normal;
  font-style: normal;
}

覆盖dygraphs全量文本元素的字体样式，增加!important避免动态生成的内联样式优先级更高导致覆盖失效：

/* 覆盖所有dygraphs文本元素 */
.dygraph-axis-label,
.dygraph-axis-label-x,
.dygraph-axis-label-y,
.dygraph-axis-label-y2,
.dygraph-legend,
.dygraph-title,
.dygraph-tooltip {
  font-family: 'Olney', sans-serif !important;
}

初始化dygraphs时同步指定字体配置，双重保证样式生效：

new Dygraph(
  document.getElementById('your-graph-container'),
  你的图表数据,
  {
    // 其余原有配置保留
    axes: {
      x: { axisLabelFontFamily: 'Olney' },
      y: { axisLabelFontFamily: 'Olney' },
      y2: { axisLabelFontFamily: 'Olney' }
    },
    legendFontFamily: 'Olney',
    titleFontFamily: 'Olney'
  }
);