如何解决使用gatsby谷歌字体插件时仍然出现未样式化文本的闪烁
我在gatsby中的主要字体是在body标签中的index.scss文件夹中定义的。
body {
font-family: "Trebuchet MS","Helvetica";
font-size: 16px;
}
对于标题,我想使用Google字体,并且我尝试使用以下插件进行预加载:
{
resolve: `gatsby-plugin-google-fonts`,options: {
fonts: [`Sacramento`],display: "swap",},{
resolve: `gatsby-plugin-prefetch-google-fonts`,options: {
fonts: [
{
family: `Sacramento`,variants: [`400`],],{
resolve: "gatsby-plugin-web-font-loader",options: {
google: {
families: ["Sacramento"],
在css字体中定义了字体,但仍在生产环境中获得未样式化文本的闪光,而不是在开发中本地显示。
.title {
font-family: "Sacramento",cursive;
}
解决方法
您的.title
类是正确的。
但是,由于您将字体显示为swap
(font-display: swap
),因此它将首先使用默认字体加载字体,直到CSS渲染并覆盖它为止。这样可以避免CSS渲染阻止网页加载,从而提高网页性能,但是如果您真的想避免闪烁,只需在options对象中添加display: block
:
{
resolve: `gatsby-plugin-google-fonts`,options: {
fonts: [
`Sacramento`
],display: 'block'
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。