0

我添加了自己的自定义字体并使用下面的代码来显示自定义字体系列，但是，似乎存在一个问题，当页面加载时，字体开始作为网络标准字体然后快速更新为我添加的自定义字体。

<style type="text/css">
@font-face{
font-family:linto;
src:url(achafsex/Achafexp.eot);
}
@font-face{
font-family:linto;
src:url(achafsex/Achafexp.ttf);
}
div{
font-family:linto;
font-size:100px;
width:500px;
}
</style>

是否有更好的代码来执行此操作，以便自定义字体与页面立即加载并且没有明显的变化效果？

4

2 回答 2

1

尝试。

@font-face {
font-family: 'linto';
src: url('linto.eot'); /* IE9 Compat Modes */
src: url('linto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('linto.woff') format('woff'), /* Modern Browsers */
     url('linto.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('linto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

然后，当您指定它时，请尝试使用：

 div {
 font-family: 'linto', Fallback, sans-serif;
 }

我看到的唯一问题是它首先从body字体加载，然后再加载你的字体。

尝试使用: body { font-family: 'linto', Fallback, sans-serif; }，首先看看这是否解决了您的加载问题，我不同意在一张纸上使用多种样式。

http://css-tricks.com/snippets/css/using-font-face/

于 2012-04-23T21:46:00.447 回答
0

在这样的场景中 - 我通常会使用一个“封面” div，它是@最高 Z-index，然后一旦页面完成加载，我将删除它，显示页面。诀窍是找出一种轮询最终用户以完成组件下载的好方法。祝你好运！

于 2012-04-23T21:26:49.933 回答