为什么使用谷歌字体 API 加载的字体有时但并非总是有效？答案

【问题标题】：Why would a font loaded with google font API work sometimes but not always?为什么使用谷歌字体 API 加载的字体有时但并非总是有效？
【发布时间】：2015-06-11 07:32:46
【问题描述】：

我使用的是 google 的字体，但它没有显示在我的 safari 机器上，尽管我已经看到它在 safari 的其他机器上正确呈现。 可能出了什么问题？它可以在其他浏览器中运行，例如 firefox 和 chrome。

包含它的 SCSS 行：

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic");

或者，有什么方法可以调试 HTML 元素使用的字体系列？我看到 CSS 中引用了正确的字体系列，并且样式规则已应用于元素，但它显示为这些看起来很奇怪的块。

“渲染”文本：

应用的 CSS 规则：

【问题讨论】：

您是否尝试打开开发工具并查看是否有任何控制台错误或涉及字体的网络错误？如果是这样，您可以将该信息添加到帖子中吗？如果没有，您能否也将这些信息添加到帖子中？
确保您没有在 Safari Developer 菜单中伪造用户代理。根据 UA，Google 会生成具有不同字体格式的 CSS 规则。使用伪造的 UA，Google 可能会发送 Safari 无法使用的字体规则。
@Mike'Pomax'Kamermans 我做了，没有与字体相关的错误。
@udondan 我检查了用户代理设置，只是设置为默认值。
您是否尝试过非 scss 纯文本“仅应用了该字体的单个 <p>”jsbin/codepoint/jsfiddle？（如果有，能给个链接吗？）

标签： css fonts safari font-face google-font-api

【解决方案1】：

正如您所发现的，调试浏览器实际使用的字体非常困难——尤其是因为浏览器对@font-face 的支持不同，并且字体的实际呈现因平台而异。 WhatTheFont 是您可能会觉得很方便的一个工具，您可以在其中上传渲染文本的图像，它会尝试识别实际使用的字体。

【讨论】：

我认为如果它实际上是在相关或接近的东西中渲染会很有帮助，但是因为它把我所有的角色都变成了翅膀（有效地）我不认为它对什么有任何影响正在渲染。