Question

我们的客户在我们的网站上看不到任何字体。字体从我们的服务器（.woff，.ttf，.eot，.svg），字体名称 - Lato Sans加载。在样式中注意到，如果字体不可用，则应使用Arial或任何其他系统sans-serif字体。在样式中也注明了字体平滑，这里是代码中的一个例子：

font-family: "Lato Sans", "PT Sans", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
text-rendering: geometricPrecision;

加载其他字体之一的示例：

@font-face {
    font-family: 'Lato Sans';
    src: url('/Content/webfonts/LatoSans/lato-regular.eot');
    src: url('/Content/webfonts/LatoSans/lato-regular.eot?#iefix') format('embedded-opentype'),
         url('/Content/webfonts/LatoSans/lato-regular.woff') format('woff'),
         url('/Content/webfonts/LatoSans/lato-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

说明：客户访问该网站（Google Chrome 58，Windows），但看不到任何文字。渲染的所有图形，字体都没有。系统字体也不显示文本。更改浏览器的大小后，似乎上传了字体并显示了所有内容。这个问题只在一个浏览器中被注意到，其余的基于WebKit / Blink也是可能的。

我只重做一次此错误，重新加载页面后，一切正常。因此无法捕获并修复错误。有什么问题，怎么解决？

我使用了几种解决方案，但它没有用。例如，在onLoad事件上通过JavaScript加载主页后加载字体。并且在加载页面后1ms内完成动画，浏览器会重绘字体（下面是最后一次修复的示例）。

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

字体不会在Google Chrome中呈现

0 个答案: