CSS加载服务器上的字体太慢、能不能在字体加载未完成之前显示默认宋体
CSS加载服务器上的字体太慢是设置错误造成的，解决方法为：
1、新建文件创建p标签，设置字体加粗。
2、设置字体大小。
3、设置使用什么字体。
4、设置下划线如下图所示。
5、附上代码<body><style>p{line-height:40px;}.p1{font-weight:bold;}.p2{font-size:36px;}.p3{ font-family:"微软雅黑"}.p4{font-style:italic;}.p5{text-decoration:underline;}</style><p class="p1">你好</p><p class="p2">你好</p><p class="p3">你好</p><p class="p4">你好</p><p class="p5">你好</p><p>你好</p></body>。
除了使用 Javascript 没有什么其它好的办法。我写了个函数，你可以直接使用。
<style type="text/css">
/* 自定义字体 */
@font-face{
font-family:yy;
src:url(../vista/atlsp1.ttf);
src:url(../vista/atlsp2.eot)\9;
}
/*
不要将 yy 添加到这里，SimSun=宋体
这样页面加载的时候文字先以宋体显示
*/
.nav {font-family: SimSun;}
</style>
把下面的 Javascript 代码添加到 <head></head> 里面
<script type="text/javascript">
// font: 字体名称，ele: 要使用此字体的元素
function loadFont(font, ele) {
var span = document.createElement("span");
// 这几个字母和符号宽度比较容易变化
span.innerHTML = "gW@i#Q!T";
// 设置为不可见，但可以测量宽度
span.style.visibility = "hidden";
// 字体大小为 500px，如果宽度变化比较容易区分
span.style.fontSize = "500px";
// 设置字体
span.style.fontFamily = font;
// 添加到页面
document.body.appendChild(span);
// 获取宽度
var width_now = span.offsetWidth;
// 每 0.05 秒检查一次是否加载
var interval_check = setInterval(function() {
// 宽度变化，说明字体被加载
if(span.offsetWidth != width_now) {
clearInterval(interval_check);
// 设置字体为
ele.style.fontFamily = font;
// 移除 span
document.body.removeChild(span);
span = null;
}
}, 50);
}
window.onload = function() {
loadFont("yy", document.getElementsByClassName("nav")[0]);
};
</script>
代码中以 // 开头的行都是注释，可以删掉。
注意上面调用 loadFont 后只对 .nav 起作用，如果其它元素还使用自定义字体，那么你要先用 Javascript 找到此元素，然后调用函数，例如
loadFont("my_font", document.getElementById("main"));
有个小缺陷、在火狐上已经OK了、在谷哥跟360上第一次访问开始显示宋体、字体加载完成之后显示了自定义的字体、一切正常、但接着访问另一个页面时、由于浏览器已经加载了这个自定义的字体、就不再重复加载、这段Javascript无法判断出来、一直以宋体来显示、 IE也不兼容现在 哥们、能再改善下吗、解决了追加200分给你 这问题都折腾我几天了、一直没法解决
不知道你的 eot 是如何转换的，我看你在字体中用了两文不同的文件名，atlsp1 和 atlsp2，你必须要保证这个 eot 字体是可用的。
代码我改了，在 IE 8/9, Firefox, Chrome, Safari, Opera 下都测试了，除了在字体转换期间 Chrome 和 Safari 可能会有那么半秒的空白（这个是没法避免的），其它都没问题。
我把这个写成一篇日志了，在空间（地址贴出来容易被蔽，点我用户名，进空间，找 font-face 那篇文章），你只需要替换 CSS 和 Javascript 函数部分。
通常情况下，如果是大容量的字体文件加载进入网站，好你必须加一段加载页面的JS代码，要不然你的网站加载速度会非常的慢，会影响网站的浏览效果。
所以我觉得没有必要的情况下，建议你还是不要加入字体文件好！
希望我的回答能令你满意!
就是必须要使用这种特殊的字体啊、不然也不想搞这么辛苦、 这加载页面的JS代码怎么弄、不熟悉JS、有现成的吗？ 给我一份 309841739 qq邮箱
不行啊、我是宋做的
html{font-family:"宋体";}
@font-face{
font-family:yy;
src:url(../vista/atlsp1.ttf);
src:url(../vista/atlsp2.eot)\9;
}
然后在需要调用这种字体的地方使用
.nav{ font-family:yy;}
这样不可以，一样优化使用 .nav定义的字体、该部分显示空白、等待字体完全加载完后才显示出来
在定义字体是时候使用
font-display: swap;
有几种不同的font-display，效果上会带来微妙的差别
font-display: swap：浏览器会直接使用font-family中最先匹配到的已经能够使用的字体，然后当font-family中更靠前的字体成功载入时，切换到更靠前的字体，相当于是FOUT。
font-display: fallback: 浏览器会先等待最靠前的字体加载，如果没加载到就不显示任何东西，这个过程大约持续100ms，然后按照顺序显示已经成功载入的字体。在此之后有大约3s的时间来提供切换到加载完毕的更靠前的字体。
font-display: optional: 浏览器会先等待最靠前的字体加载，如果没加载到就不显示任何东西，这个过程大约持续100ms，然后字体就不会再更改了（一般第一次打开某页面的时候都会使用fallabck字体，字体被下载但是没被使用，之后打开时会使用缓存中的字体）。
@font-face {
font-family: Merriweather;
src: url(/path/to/fonts/Merriweather.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
