Google 字体无法在 Google Chrome 上呈现
Posted
技术标签:
【中文标题】Google 字体无法在 Google Chrome 上呈现【英文标题】：Google Fonts are not rendering on Google Chrome 【发布时间】：2014-03-27 11:53:37 【问题描述】：我正在构建一个新的 WordPress 主题（不知道这是否相关），这个问题一直困扰着我。
我已经从 Google Webfonts 加载了 Roboto Slab（包括 <head> 部分中的 CSS）。在所有其他浏览器上，字体都呈现正常，除了谷歌浏览器。当我第一次在 Google Chrome 中加载网站时，根本不会显示使用该自定义字体的文本（即使字体堆栈也将格鲁吉亚作为后备 - "Roboto Slab", Georgia, serif;）。在我悬停样式链接后，或在 Inspector 中重新触发任何 CSS 属性 - 文本变得可见。
自从我前段时间开始使用该主题以来，我清楚地记得它之前运行良好。这是最近已知的 Chrome 更新错误吗？
首次加载：
在我重新应用任何 CSS 属性后，进入响应式视图或悬停元素：
有人有类似的问题吗？我应该如何处理？
谢谢！
【问题讨论】：
您是否检查过页面加载时间线，您的字体是否被正确获取？ 你试过缓存刷新吗？ (ctrl+f5) 如果您没有在字体链接中添加“http://”，有时也会发生这种情况。 嘿，是的，字体提取正常。 CTRL+F5 没有帮助，因为我在几个不同的桌面上检查过它。现在，我已经设法通过在应该应用此字体的元素上绑定自定义 jQueryredraw() 函数来解决这个问题。它可以工作，但我仍然想知道为什么没有像这样的黑客它就不能工作。
人们还在遇到这个问题吗？我曾经使用过，但似乎 Google 已修复它？
这个问题是否也适用于 android 设备上的 Chrome？
【参考方案1】：
显然是known Chrome bug。有一个纯 CSS 的解决方法可以解决这个问题：
body
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
@-webkit-keyframes fontfix
from opacity: 1;
to opacity: 1;
似乎只需要告诉 Chrome 重新绘制文本
【讨论】：
其实这样完美解决了问题！非常感谢！ 我最近的网络项目遇到了这个问题，这让我发疯了，非常感谢！ 嗯，错误论坛中的其他人能够使用 jquery 使其工作（但我无法）： jQuery('body') .delay(500) .queue( function( next) jQuery(this).css('padding-right', '1px'); ); 这一直困扰着我！ 这很完美。对我来说，这个 CSS 是 javascript 解决方法的更好替代方案。但是，如果这对您不起作用，请尝试 jQuery(function() jQuery('body').hide().show(); );【参考方案2】：如果 css 修复对您不起作用
如果first rated post 不起作用，这里有一个解决方案：
删除以下中的“http:”：
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
或
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
正如David Bain 所解释的，大多数现代浏览器实际上并不要求您指定协议，它们会根据您调用它的上下文“推断”协议
【讨论】：
这个。所有这些 sill JS 和 CSS hack，你需要做的就是删除“http:” 同样从未有过，仍然是问题。 只有当您的网站运行 https 时，这才是一个有效的答案，因为您试图从浏览器不允许的 http 资源中提取。【参考方案3】：CSS 修复对我不起作用，而且 0.5 秒延迟脚本似乎很尴尬。
这个 JS sn-p 似乎对我们有用：
<script type="text/javascript">
jQuery(function($)
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()))
$('body').css('opacity', '1.0')
)
</script>
【讨论】：
这只是间歇性地为我修复它，希望我能收回我的投票。 @KarlGlaser 你可以。再次单击“向上”以恢复为中性。 （点击“down”跳过投票）。 @OJFord 过了宽限期就得编辑【参考方案4】：单独尝试了上面的css修复，但没有成功。最后通过创建包含以下内容的样式表（chrome.css）解决：
body
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
@@-webkit-keyframes fontfix
from opacity: 1;
to opacity: 1;
并在页面底部使用 jquery 加载它：
<script type="text/javascript">
$(document).ready(function ()
$('head').append('<link href="/chrome.css" rel="stylesheet" />');
);
</script>
【讨论】：
尽管它的评分低于公认的答案，但这个解决方案是唯一对我有用的解决方案。 这给出了一个错误：GET https://<insert domain name here>/chrome.css net::ERR_ABORTED 404
Javascript 代码修复了渲染问题！【参考方案5】：
我已经合并了上面的 CSS ...但我还在我的标题中包含了以下 javascript：
（注意，我知道我没有在下面的代码中自定义字体。但无论如何，它似乎仍然有助于强制 Chrome 重新绘制页面上的字体......只要确保你的字体在其他地方被正确引用)
将上面提到的 CSS 与我的...中包含的以下代码结合使用，最坏的情况是，我页面上的所有字体都会在延迟一秒左右后显示出来。
希望这对人们有所帮助。干杯。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() $('body').hide().show(); );
</script>
<script type="text/javascript">
//JavaScript goes here
WebFontConfig =
google: families: ['FontOne', 'FontTwo'] ,
fontinactive: function (fontFamily, fontDescription)
//Something went wrong! Let's load our local fonts.
WebFontConfig =
custom: families: ['FontOne', 'FontTwo'],
urls: ['font-one.css', 'font-two.css']
;
loadFonts();
;
function loadFonts()
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
(function ()
//Once document is ready, load the fonts.
loadFonts();
)();
</script>
这是我找到上述内容的地方： https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso
【讨论】：
【参考方案6】：我使用 JS 解决方案修复了它，但还需要使用最新的 google 托管 jquery (1.11) 来修复它。
【讨论】：
【参考方案7】：我刚刚遇到了同样的问题。我是由于here 所述的 HTTP/S 协议不匹配造成的。
使用 https 版本的 URL。
【讨论】：
【参考方案8】：查看类似问题Strange Issue while Google Font Rendering。
解决方案是从 Mozilla CDN 而不是 Google CDN 加载所需的字体（我的情况是“Fira Sans”）。
【讨论】：
【参考方案9】：这不是一个实际的解决方案，但它对我来说比这个线程中的其他所有东西都好。我改变了字体。我有 Fira Sans，现在只是改为 Roboto，它可以开箱即用。
【讨论】：
【参考方案10】：我刚刚从我的 Windows 字体中删除了roboto字体，现在一切正常。
这可能是因为您的系统上有旧版本的字体。我猜。
【讨论】：
【参考方案11】：我正在尝试使用 Meg 的答案，但和许多其他人一样，它对我也不起作用。
为了使用谷歌字体，发现了这个技巧[为步骤添加屏幕截图]。
1) 只需从突出显示的 css 或标准链接中获取 url。
2) 在另一个选项卡中打开链接，将整个 css 代码（即字体）复制到您的 css 文件中并运行。
不确定性能，因为添加了许多 http 调用，或者只是尝试复制一种字体。
第 1 步的图片
第 2 步的图片
【讨论】：
【参考方案12】：元素可能设置了text-rendering: optimizeLegibility，这可能会导致此问题或类似问题。将其更改为 auto 为我解决了这个问题，Foundation 5 项目默认将其设置为 optimizeLegibility。
【讨论】：
【参考方案13】：如果有人仍在努力解决这个问题（2019 年），Google 字体 CSS 生成器脚本中似乎存在错误。
我用以下标签加载了我的字体：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">
文件中的每个@font-face 都包含这样的一行：
src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
如您所见，local('sans-serif') 放在远程 URL 之前，这是错误的。这会导致 Chrome 加载默认的无衬线字体而不是请求的字体。
一个简单的解决方法是将 URL 的 font-weight 部分重新排序，从 Roboto:400,300 到 Roboto:300,400。这会导致生成器不包含local('sans-serif') 源。
希望对某人有所帮助。
【讨论】：
【参考方案14】：我只是分享对我有用的方法。您的结果可能会有所不同。
我有 main.css 和多个字体的 @import，由 |（管道）字符分隔。这一直工作到今天。我将所有谷歌字体导入保存在主 CSS 文件中，因为我没有那么多。今天我添加了一个在 Chrome 或 Firefox 中根本不会呈现的内容。我尝试了不同的字体 - 同样的问题。
最后，我在另一个 CSS 文件中创建了一个单独的 @import，该文件会为网站上的多个页面加载（例如，我们称之为 navbar_pages.css） - 这个 CSS 通过 <link rel="stylesheet" type="text/css" href="/css/navbar_pages.css"> 包含在相关页面中，就像main.css 一样。
出于某种原因，将 @import 放在单独的 CSS 文件中解决了这个问题。
我怀疑这是由于在单个@import 调用中可以调用的字体数量受到限制。应该做更多的测试来确定原因，但现在有我的解决方法。如果有人有见解，请发表评论。
【讨论】：
【参考方案15】：它可能不是灵丹妙药，但可以通过将 fontawesome css 链接移动到我们页面底部以及上面列出的 weblike 修复来解决我们网站上的问题。
【讨论】：
【参考方案16】：如果在您尝试此处所有出色的解决方案之前人们仍然遇到此问题，请尝试在您的 css 中使用 !important 标记以查看是否可以解决它，就像它对我所做的那样，我不确定该错误是否是与旧的 Chrome 错误相同。
.faultyText "Roboto Slab", Georgia, serif !important
【讨论】：
【参考方案17】：我制作的结帐插件：https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok
它使用纯 javascript 重新对齐网络，这会强制浏览器重绘整个页面。
【讨论】：
我们希望修复是全球性的，不仅适用于安装自定义插件的用户。以上是关于Google 字体无法在 Google Chrome 上呈现的主要内容，如果未能解决你的问题，请参考以下文章
Google 字体无法在 Google Chrome 上呈现
使用 TailwindCSS 时，Google 字体无法在移动设备上呈现