Macos 嵌入式视频崩溃/中断字体

我们刚刚发布了一个新的网站（），我们只在Mac Safari/Chrome上使用字体时遇到问题。它将在前半秒左右加载为正确的字体（在顶部的导航中），但当视频加载到iframe中时，字体会中断。它比正常情况下轻/薄得多，我们不知道如何修复它

该问题仅在页面具有youtube/vimeo视频的iframe时出现。例如。如果你观看橙色导航，你会注意到字体的重量会增加一点，但一旦youtube视频加载进来，字体就会变轻。从DOM中删除视频iframe或将其设置为“不显示”可以解决问题，但使其再次可见会再次破坏字体

有人有什么想法吗

webkit平滑、字体平滑、旋转、文本阴影尚未修复

这是我们的字体名称：

@font-face {
/*    font-family: neuzeitGroteskLight;*/
    font-family: VulyFont-Light;
    src: url(/css/fonts/neuzeitgro-lig-webfont.eot);
    src: url('/css/fonts/neuzeitgro-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-lig-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-lig-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-lig-webfont.svg#NeuzeitGroteskLight) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
/*    font-family: 'neuzeitGroteskRegular';*/
    font-family: VulyFont;
    src: url(/css/fonts/neuzeitgro-reg-webfont.eot);
    src: url('/css/fonts/neuzeitgro-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-reg-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-reg-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-reg-webfont.svg#NeuzeitGroteskRegular) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

}

@font-face {
/*    font-family: 'neuzeitGroteskBold';*/
    font-family: VulyFont-Bold;
    src: url(/css/fonts/neuzeitgro-bol-webfont.eot);
    src: url('/css/fonts/neuzeitgro-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-bol-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-bol-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-bol-webfont.svg#NeuzeitGroteskBold) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

}

---

我今天花了几个小时调查

Mac和PC对此特定字体以不同方式呈现相同的字体系列/重量/样式

A） Mac和PC firefox在呈现字体时没有问题

A） PC Chrome和PC Safari在呈现字体时没有问题

B） Mac Chrome、Mac Safari、iPad和iPhone在加载视频或在页面上播放视频时出现字体渲染问题

解决方案：

我们有两种版本的字体——浅色字体和普通字体

对于上面的选项A），我们现在使用

VulyFont Light

，因为字体变轻没有问题

对于上面的选项B），我们使用

VulyFont

和

-webkit字体平滑：抗锯齿！重要的（如果需要
！important
，我不是100%）。字体平滑的效果是，当加载或开始播放视频时，它可以防止字体重新渲染或变亮/中断。因此，我们让它呈现几乎完全相同的跨浏览器/平台。唯一的区别是字体的两个版本之间的次要字形间距