Google Fonts的使用

最新推荐文章于 2024-05-31 10:04:55 发布

joe_324

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量760

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/joe_324/article/details/122475680

版权

Google Fonts官网

font-display: swap;

让字体文件本身变成异步的——浏览器会先显示我们的回退（fallback）文本，等Web字体可用时再切换过去。

media=“print” οnlοad=“this.media=‘all’”

隐式告诉浏览器以非阻塞方式加载CSS文件，仅将样式应用于print上下文。但当文件传输过来时，我们会告诉浏览器将其应用于all上下文，为页面的剩余部分应用样式。

用 $CSS 指代 https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900

<head>
	<!-- 预连接fonts.gstatic.com源 （字体文件本身托管在fonts.gstatic.com上） -->
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<!-- 启动CSS文件的高优先级异步获取 （适用于大多数现代浏览器） -->
    <link rel="preload" as="style" href="$CSS&display=swap" />
	<!-- 启动应用于页面的低优先级异步获取 （适应于所有浏览器） -->
    <link rel="stylesheet" href="$CSS&display=swap" media="print" onload="this.media='all'">
	<!-- 应对访客故意禁用JavaScript -->
    <noscript>
        <link rel="stylesheet" href="$CSS&display=swap" />
    </noscript>
</head>

参考原文

joe_324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Fonts的使用

Google Fonts官网font-display: swap;让字体文件本身变成异步的——浏览器会先显示我们的回退（fallback）文本，等Web字体可用时再切换过去。media=“print” οnlοad=“this.media=‘all’”隐式告诉浏览器以非阻塞方式加载CSS文件，仅将样式应用于print上下文。但当文件传输过来时，我们会告诉浏览器将其应用于all上下文，为页面的剩余部分应用样式。<head><!-- 预连接fonts.gstatic.com
复制链接

扫一扫