📅 最后修改于: 2023-12-03 14:58:46.291000 🧑 作者: Mango
在Web开发过程中，浏览器解析HTML文件的过程中会产生一些差距，这个差距就是顺风差距（FOUT，Flash Of Unstyled Text），在页面渲染过程中可能会出现文字样式不一致或者文字出现了短暂的无样式状态，这个问题会影响用户体验度，特别是在移动设备上。本文将介绍顺风差距的概念、原因、解决方法等。
顺风差距的原因通常是由于浏览器请求HTML文档后缓慢加载页面相关资源，如CSS文件、JavaScript文件等，所以在渲染页面的过程中先显示出了无样式的文本。
当浏览器解析HTML文档时，会将文本按照HTML标记进行分类，然后通过样式文件对文本进行样式修饰。但是如果样式文件没有立即下载，而是延迟加载，浏览器就会在DOM（Document Object Model 文档对象模型）构建完成后再进行页面渲染，这个过程中无样式的文本就会出现在页面中。
使用@font-face引入自定义字体时，可以避免使用系统默认字体，从而避免了因为系统字体问题而造成的文本显示不一致问题。
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/mycustomfont.ttf');
}
body{
font-family: 'MyCustomFont';
}
<!DOCTYPE html>
<html>
<head>
<title>防止 FOUT </title>
<style>
/* 等待字体被加载，然后再显示 HTML文件 */
html { opacity: 0; }
/* 当字体被加载，移除 opacity 属性，做到无缝切换 */
html.fontLoaded { opacity: 1; }
/* 预加载字体 */
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/mycustomfont.ttf');
}
</style>
<script>
// 等待字体被加载后，显示 html元素
document.fonts.ready.then(function () {
document.documentElement.classList.add('fontLoaded');
});
</script>
</head>
<body>
<h1>没有顺风差距！</h1>
</body>
</html>
以上的代码片段中，一开始整个HTML文档被隐藏，直到字体被完全加载完成才移除了隐藏属性，以达到防止FOUT的效果。
FOIT全称Flash of Invisible Text，它是顺风差距的一种优化方案，其核心思想是对文字设置背景色和文本的子属性，当样式文件导入完成之前，文本显示背景色，用户体验并不会受到太大影响。
<!DOCTYPE html>
<html>
<head>
<title>FOIT</title>
<link href="style.css" rel="stylesheet">
<style>
.font {
font-size: 16px;
width: 10em;
height: 1em;
color: transparent;
background: #fff;
font-family: 'MyCustomFont',sans-serif;
}
</style>
</head>
<body>
<div class="font">Hello World</div>
</body>
</html>
使用FOIT的核心思想就是对文字进行子属性设置，先隐藏文字本身，让背景色显示出来。当样式文件导入完成之后，文本就可以很好地被样式控制，并且文字本身的颜色会和字体颜色保持一致。但是需要注意，FOIT也存在体验度问题，用户依然会看到背景色，并且文字可能会跳动，影响阅读效果。
顺风差距是web开发过程中一个很常见的问题，但也非常容易解决。建议使用延迟下载的解决方案，就可以确保文本完全由样式控制。但是，FOIT和延迟下载都存在一些体验度问题，需要开发者具体情况具体分析。