Question

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

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

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

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

Answer 2

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

在没有负载效应的情况下使用自定义字体系列的最佳方法？

2 个答案: