css - 在没有加载效果的情况下使用自定义字体系列的最佳方法？

Question

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

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

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

Answer 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 字体加载，然后加载您的字体。

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

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