javascript - 如何消除作为字体的阻塞 CSS?

标签 javascript css html fonts pagespeed

我目前正在使用我的 <head> 中包含的 Google 字体通过 Rails application.scss 标记,如下所示:

`@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');`

Google PageSpeed 说我需要“消除首屏内容中阻止呈现的 JavaScript 和 CSS”当我将字体 CSS 移动到页面底部时,每当页面加载时整个页面都会跳转。

我怎样才能使 Google 字体成为非阻塞的,但页面在完成加载时不会跳转?

最佳答案

您可以阅读一篇关于这个问题的好文章 here

问题是您将无法摆脱那个跳跃问题(除非自定义字体与被替换的字体具有完全相同的属性)。

And there you have it. If you load the page for the very first time you will see the fallback font immediately, followed by the web font once it loads. Subsequent visits will load the web fonts from cache and show them immediately. It’s the best of both worlds.

是的,长话短说,您可以实现性能,也可以避免 FOUC,但不能两者兼而有之。

关于javascript - 如何消除作为字体的阻塞 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41787068/

相关文章:

javascript - 我们可以使用phonegap 在 HTML5 和 javascript 中访问 Android 设备的 native 内容,例如联系人列表、相机图片等吗?

javascript - 为什么 jQuery.load 不适用于该页面?

javascript - angular-bootstrap-slider 默认值/双向绑定(bind)

javascript - 从另一个页面加载和更改 iFrame 'src'

javascript - 如何在 css 中更改另一个 div 的颜色

css - 文本开始溢出时如何使用动态替换文本?

javascript - 无法访问 React 组件中的 Redux 状态

javascript inner html 不断更新

javascript - (由设计更改修复)在响应式设计站点上使用 jQuery 计算高度以保持两列等高

JavaScript - onmouseover 修改前一个元素的 css 高度