0

我们刚刚发布了一个新网站 ( 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;

}
4

1 回答 1

0

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

Mac 和 PC 针对此特定字体呈现不同的字体系列/粗细/样式。

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

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

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

解决方案：

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

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

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

于 2012-08-21T05:05:24.580 回答