html字体加载时间控制,css – 什么时候加载网页字体,并可以预加载？

我注意到使用网络字体，最初可能需要一秒钟才能出现;就像您创建一个下拉导航菜单一样，当您首次将鼠标悬停在菜单上时，整个菜单将仅显示一秒钟的背景颜色，然后文本将显示。

这不是真正的理想，它引导我相信当加载CSS文件时，而不是首先在页面上查看它们时，网页字体不会被下载。

但另一方面，我已经在我的电脑上安装了字体，所以不需要下载，所以提出了为什么要这样做的问题！

这是我用来加载我的webfonts的CSS：

@font-face {

font-family: 'Roboto';

src: url('../fonts/Roboto-Regular-webfont.eot');

src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/Roboto-Regular-webfont.woff') format('woff'),

url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),

url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Roboto';

src: url('../fonts/Roboto-Italic-webfont.eot');

src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/Roboto-Italic-webfont.woff') format('woff'),

url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),

url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');

font-weight: normal;

font-style: italic;

}

@font-face {

font-family: 'Roboto';

src: url('../fonts/Roboto-Bold-webfont.eot');

src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/Roboto-Bold-webfont.woff') format('woff'),

url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),

url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');

font-weight: bold;

font-style: normal;

}

@font-face {

font-family: 'Roboto';

src: url('../fonts/Roboto-Light-webfont.eot');

src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/Roboto-Light-webfont.woff') format('woff'),

url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),

url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');

font-weight: 300;

font-style: normal;

}

@font-face {

font-family: 'Roboto';

src: url('../fonts/Roboto-Medium-webfont.eot');

src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/Roboto-Medium-webfont.woff') format('woff'),

url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),

url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');

font-weight: 500;

font-style: normal;

}