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

解决方法

什么时候下载webfonts？

保罗·爱尔兰做了一个简单的页面来测试这个：http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

它显示大多数浏览器在页面中使用字体时，而不是在CSS中声明时才会下载字体。我相信IE是一个例外，但我现在没有运行测试。

使用而不是声明下载的原因是减少不必要的网络流量，例如如果声明但未使用字体。

可以避免字体下载吗？

你是对的，如果已经安装了字体，那么不需要下载它们。正如@Patrick上面所说的，这可以使用local()完成。它放在CSS中的url()之前，并且使用字体的名称(Mac OS X上的Safari后续需要PostScript名称)。尝试以下更改您的CSS：

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: local(Roboto Regular),local(Roboto-Regular),url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

最后，为了减少字体下载时间，您可以确保执行以下操作：

>将CSS放在JavaScript之前
>添加远期的Expires标题
字体(所以浏览器缓存它们)
> GZipping字体

这是处理字体显示延迟的一个很好的总结：http://paulirish.com/2009/fighting-the-font-face-fout/

原文地址：https://www.jb51.cc/css/219668.html