Question

我们刚刚发布了一个新网站（http://www.vulytrampolines.com/），我们在Mac Safari / Chrome上遇到了font-face调用问题。它将在前半秒左右（在顶部的导航中）加载为正确的字体，但是当视频在iframe中加载时，字体会中断。它比正常情况更轻/更薄，我们无法弄清楚如何解决它。

只有当网页包含iftube / vimeo视频的iframe时才会出现此问题。例如。 http://vulytrampolines.com/aboutus。如果您观看橙色导航，您会注意到字体会有更多的重量，但是一旦youtube视频加载，它就会变亮。从DOM中删除视频iframe或将其设置为none，然后解决问题，但是再次使其可见会再次破坏字体。

有人有什么想法吗？

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

}

Answer 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-face

1 个答案: