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

【问题标题】：Embedded videos crash/break font-face嵌入式视频崩溃/中断字体
【发布时间】：2012-07-20 01:36:55
【问题描述】：

我们刚刚发布了一个新网站 (http://www.vulytrampolines.com/)，但我们仅在 Mac Safari/Chrome 上遇到了字体调用问题。它将在前半秒左右加载为正确的字体（在顶部的导航中），但是当视频在 iframe 中加载时，字体会中断。它比正常情况更轻/更薄，我们不知道如何修复它。

仅当页面具有指向 youtube/vimeo 视频的 iframe 时，才会出现此问题。例如。 http://vulytrampolines.com/aboutus。如果您观看橙色导航，您会注意到字体的重量会增加一些，但是一旦加载 youtube 视频就会变轻。从 DOM 中删除视频 iframe 或将其设置为不显示，然后解决问题，但是让它再次可见会再次破坏字体。

有人有什么想法吗？

~~webkit-smoothing、字体平滑~~、旋转、文本阴影都没有修复。

这是我们的字体调用：

@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;

}

【问题讨论】：

标签： macos google-chrome video safari font-face

【解决方案1】：

我今天花了几个小时调查。

Mac 和 PC 以不同的方式呈现相同的字体系列/粗细/样式。

A) Mac 和 PC 的 firefox 在渲染字体时没有问题。

A) PC Chrome 和 PC Safari 在渲染字体时没有问题。

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

解决方案：

我们有两个版本的字体 - 浅色字体和普通字体。

对于上面的选项 A)，我们现在使用 VulyFont-Light，因为字体变浅没有问题。

对于上面的选项 B)，我们使用 VulyFont 和 -webkit-font-smoothing: antialiased !important;（如果需要 !important，我不是 100%）。 font-smoothing 的效果是它可以防止在加载或开始播放视频时重新渲染字体或变得更轻/破坏。所以我们让它呈现几乎完全相同的跨浏览器/平台。唯一的区别是两个版本的字体之间的字形间距很小。

【讨论】：