在我的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');
}
现在我在谷歌的灯塔上进行测试
它显示我预加载字体的键请求
现在我的问题是:
1)如何预加载这些字体?
2)为什么我必须使用这么多字体?我不能得到一个单一的字体文件,我可以得到所有这些(Ralway,RalewayBold,RalewayMedium等)字体。我该怎么做?
3)我只能找到ttf,在哪里可以找到woff2?
你不必预加载任何东西!您可以使用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和此类服务存在的主要原因之一。
如果你想要更多的字体,你可以看看谷歌的看似endless collection的免费字体。
注意:考虑到谷歌字体(和其他谷歌服务)的范围,我怀疑谷歌将很快摆脱它的字体服务。
警告:使用的字体越多,网站加载的时间越长,I.E:5种字体的加载时间比2种字体要长。
祝好运。