时间戳

首页 > 解决方案 > 如何预加载字体？

javascript - 如何预加载字体？

问题描述

在我的index.html 中，我有以下代码

<link rel="preload" href="assets/fonts/Raleway-Black.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-Bold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-ExtraBold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-Medium.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/Raleway-SemiBold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/raleway-v12-latin-regular.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="assets/fonts/raleway-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

而我我的CSS

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Raleway'), local('Raleway-Regular'),
         url('assets/fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('assets/fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('assets/fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'RalewayMedium';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'RalewayBold';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'RalewayExtraBold';
    font-style: normal;
    font-weight: 800;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: 'RalewayBlack';
    font-style: normal;
    font-weight: 900;
    src: local('Raleway'), local('Raleway-Regular'),
            url('assets/fonts/Raleway-Black.ttf') format('truetype');
}

现在当我在 Google 的 Lighthouse 上测试它时

它告诉我预加载字体的关键请求

现在我的问题是：

1) 如何预加载这些字体？

2）为什么我必须使用这么多字体？我不能获得一个单一的字体文件，我可以在其中获得所有这些（Ralway、RalewayBold、RalewayMedium 等）字体。我怎样才能做到？

3）我只能找到ttf，我在哪里可以找到相同的woff2？

标签： javascripthtmlcsspagespeed

解决方案

您无需预加载任何内容！您可以只使用 Google 字体并将所有link标签替换为：

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />

如果要包含不同的字体粗细，请添加一个冒号 ( :)，后跟所需的字体粗细，如下所示：

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,600,700,900" />

您甚至可以使用管道 ( ) 加载多种字体（在一个链接中|）：

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:700|Raleway:400,600,700,900" />

这太棒了，因为如果您的用户在访问您的网站之前访问过的另一个网站使用了该Raleway字体，那么该字体将被缓存在他们的浏览器中，从而缩短您的加载时间，这是 CDN 和此类服务存在的主要原因之一。

如果您想要更多字体，可以查看 Google 看似无穷无尽的免费字体集合。

注意：鉴于谷歌字体（和其他谷歌服务）的范围，我怀疑谷歌会很快摆脱它的字体服务。

警告：您使用的字体越多，您的网站加载时间就越长，即： 5 种字体的加载时间比 2 种字体要长。

祝你好运。

推荐阅读