如何为Power BI Embedded加载Web字体？需通过CDN提供，报表嵌入在iframe中

问题根源 #

iframe属于独立的浏览器上下文，宿主页面加载的Web字体无法穿透到iframe内部，必须在iframe的文档环境中直接加载字体资源。

可行解决方案 #

1. 直接修改iframe源页面的样式（优先推荐） #

在报表页面的CSS中添加@font-face规则，直接引入CDN上的字体文件：

@font-face {
  font-family: '目标字体名称';
  src: url('https://cdn.example.com/font.woff2') format('woff2'),
       url('https://cdn.example.com/font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

/* 给报表内容应用字体 */
.report-section {
  font-family: '目标字体名称', sans-serif;
}

2. 无法修改iframe源时，通过postMessage注入字体样式 #

如果报表页面是第三方资源无法直接修改，可通过跨页面通信向iframe注入字体样式：

• 宿主页面代码：

window.onload = function() {
  const reportIframe = document.getElementById('your-iframe-id');
  const fontStyle = `
    @font-face {
      font-family: '目标字体名称';
      src: url('https://cdn.example.com/font.woff2') format('woff2');
    }
  `;
  reportIframe.contentWindow.postMessage({ action: 'addFont', css: fontStyle }, 'https://iframe-domain.com');
  // 生产环境务必指定iframe的具体域名，不要用*
};

• iframe页面需配合添加监听（若能协调修改）：

window.addEventListener('message', function(e) {
  if (e.origin !== 'https://host-domain.com') return; // 验证宿主域名
  if (e.data.action === 'addFont') {
    const styleEl = document.createElement('style');
    styleEl.textContent = e.data.css;
    document.head.appendChild(styleEl);
  }
});

3. 优化字体加载体验（可选） #

为避免字体加载时出现无样式文本闪烁，可使用Font Face Observer在字体加载完成后再切换样式：

// 在iframe页面中引入并使用
const fontObserver = new FontFaceObserver('目标字体名称');
fontObserver.load().then(() => {
  document.documentElement.classList.add('font-loaded');
});

配合CSS：

.report-section {
  font-family: sans-serif;
}
.font-loaded .report-section {
  font-family: '目标字体名称', sans-serif;
}

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