Google 字体无法在 Chrome 中正确加载答案

【问题标题】：Google font doesn't load properly in ChromeGoogle 字体无法在 Chrome 中正确加载
【发布时间】：2016-05-29 01:34:12
【问题描述】：

我正在使用来自 Google Fonts 的“Ubuntu Condensed”字体开发一个网站。有时，当我浏览子页面时，我的导航菜单会将其样式更改为不同的字体或不同的样式。有时我网站上的其他文本会更改其字体或特殊字符（波兰语）以不同的字体呈现。

我意识到 Chrome 有问题，因为每当我打开元素检查器并禁用/启用 CSS 规则时，一切都会恢复正常。 Chrome 似乎加载 CSS 太晚了。

我尝试了 Chrome 错误的字体修复，但它根本不起作用。没有什么帮助。 Firefox 可以正常显示所有内容。

【问题讨论】：

标题不应该是“谷歌字体无法在 Chrome 中正确加载”吗？您是否检查过任何控制台错误？ Chrome devtools 中的 Network 选项卡怎么样？在其他浏览器中加载正常吗？
@aziz 没有控制台错误，它在 Firefox 中正确加载。我将检查“网络”选项卡。
css可能会及时加载，但字体也需要加载。这是一个单独的文件。之后，页面需要重新渲染。在许多站点上，您会在某种意义上看到这种“错误”，即字体在加载过程中更改一次，有时甚至更改几次。 Chrome 是新的 IE。 ;-)
@golezTrol 我该如何解决？
可能是缓存问题 - 在隐身模式下检查您的网站 (Ctrl + Shift + N) 或加载优先级 - 您如何导入上述字体？

标签： html css google-chrome fonts google-font-api

【解决方案1】：

有两个问题：

1) 好像和本地字体有冲突：Google Webfont conflict with local font，所以第一步是像本地字体一样导入Ubuntu Condensed：

@font-face {
          font-family: 'UbuntuC';
          font-style: normal;
          font-weight: 700;
          src: @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
        }

2) 我试过不使用 css 链接，它可以工作，但是 html5blank css 文件改变了正文 font 属性，你有更改这些规则或添加重要的：

@font-face {
          font-family: 'UbuntuC';
          font-style: normal;
          font-weight: 700;
          src: @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
        }

        body {
            font-family: 'UbuntuC', sans-serif !important;
        }

在 Chrome、OS X 中测试

【讨论】：

【解决方案2】：

这个问题可能是由于不包括字体的扩展拉丁子集，从而导致某些字符的奇怪呈现，我建议添加子集以获得更好的兼容性。

将此添加到您的标题中，并确保它位于任何 CSS 文件之前：

<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

CSS 规则

font-family: 'Ubuntu Condensed', sans-serif;

我会亲自使用 Google CDN，而不是下载字体并在本地加载它，有关这方面的更多详细信息，请阅读：webfonts vs. local fonts

【讨论】：

问题是 - 尝试单击和取消单击 Chrome devTools 中的任何 CSS 规则。在这样的操作之后，特殊字符会回到正确的字体。另外，我从 google CDN 开始，但切换到本地字体，看看是否能解决问题。
您是否再次尝试使用扩展的拉丁语子集？

【解决方案3】：

从你的样式表中删除它：

text-rendering: optimizeLegibility;

这是 Chrome 中的一个错误，我最近几个月才注意到它。

【讨论】：

【解决方案4】：

将此代码复制并粘贴到 HTML 标头中，当您可以访问 Internet 时，将自动加载字体

<link rel="stylesheet" type="text/css" href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed'>

【讨论】：