google-font-api 相关问题

Google字体目录提供高质量的网络字体,您可以使用Google字体API在网页中添加这些字体。可从http://code.google.com/apis/webfonts/获取

如何在我的项目中使用“Lato”字体系列? [已关闭]

我在我的 .css 文件中使用了这样的样式,但它不起作用。我该怎么做才能让我的代码正常工作? 字体系列:Lato、Helvetica、sans-serif; 链接:http://www.google.com/fonts/specimen/Lato

回答 2 投票 0

从 Google 字体中选择所有样式

这可能是一个愚蠢的问题,但我想知道是否有一种方法可以一键选择任何给定字体的所有样式,而不必单击每个单独的样式(Thin 100、Thin 100 Itali...

回答 3 投票 0

为什么 Google Font 预连接到 fonts.googleapis.com

我想将 Quicksand 字体添加到我的网站,因此 google 提示我添加以下内容: 我想将 Quicksand 字体添加到我的网站,因此 google 提示我添加以下内容: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=**Quicksand:wght@500**&display=swap" rel="stylesheet"> 第一行代码(即预连接到 fonts.googleapis.com)会给我们带来什么好处? 我的意思是我明白预连接到 fonts.gstatic.com 的意义,因为字体文件驻留在该域中。 所有主要浏览器(Google Chrome、Apple Safari、Microsoft Edge)在字体加载之前都会在使用该字体的文本位置显示空白。 单独的 Mozilla Firefox 以默认字体显示文本,然后在加载后以该字体重新呈现文本。 因此,为了获得更好的用户体验,使用链接类型rel="preconnect",以便在点击链接时可以更快地获取链接内容。 MDN 文档: 链接类型:预连接 rel 属性的 preconnect 关键字 该元素向浏览器提示用户可能会 需要来自目标资源来源的资源,因此 浏览器可以通过先发制人的方式改善用户体验 启动与该源的连接。 不同浏览器与网络字体的浏览器特定行为如下 谷歌浏览器 Chrome 渲染页面的其余部分,但直到 字体已加载,它会在文本位置显示一个空格 使用该字体。 Mozilla 火狐 Firefox 首先以默认字体显示文本, 然后在加载后重新渲染字体中的文本。这种行为 被称为“无样式文本的闪光。” 苹果Safari Safari 渲染页面的其余部分,但直到字体 已加载,它会显示一个空格来代替使用的文本 字体。 微软 Internet Explorer Internet Explorer 呈现其余部分 页面,但在字体加载之前,它会在 使用该字体的文本的位置。 现代浏览器尽力预测页面需要哪些连接,但它们无法可靠地预测所有连接。好消息是您可以给他们一个(资源😉)提示。 将 rel=preconnect 添加到 a 中会通知浏览器您的页面打算建立与另一个域的连接,并且您希望该过程尽快启动。资源加载速度会更快,因为在浏览器请求资源时设置过程已经完成。 https://web.dev/i18n/en/preconnect-and-dns-prefetch/ 我也有同样的问题。经过几个月的摸索,谷歌这样做的理由是什么,我得出了以下结论: 首先注意 HTML 是按顺序解析的。当浏览器遇到引用外部资源(例如 CSS 文件、JavaScript 文件和图像)的元素时,它会发起获取这些资源的请求,通常是异步执行的,以避免阻塞剩余 HTML 的解析。当浏览器解析 HTML 时,它会创建一个需要获取和处理的资源列表。该列表通常称为“资源队列”。浏览器使用不同的启发式方法对资源队列中的资源进行优先级排序,为更高优先级的资源分配更多的带宽和处理能力。 预连接到 fonts.googleapis.com 最初似乎只提供了最小的节省时间的好处,因为实际的 CSS 请求紧随其后。然而,谷歌包含预连接提示仍然有意义,因为谷歌无法预测每个使用其字体的网站中元素的确切结构。 如果与字体相关的元素出现在头部末尾,则浏览器可能已经优先加载其他资源,可能是针对缓慢或不可靠的网络连接。通过包含预连接提示,您可以向浏览器提供有关与特定域建立连接的重要性的附加信息。这可以帮助浏览器优先考虑连接建立过程,确保它尽早发生,即使在预连接提示之后不久就出现了对资源的实际请求(按代码方式)。 此外,在开发网站的过程中,开发人员可能会无意中在预连接和 CSS 请求之间添加更多代码行,例如 JavaScript 或来自其他域的字体。这可能会增加预连接提示和实际 CSS 请求之间的距离。在这种情况下,根据网络条件和浏览器的资源优先级,使用预连接的节省时间的好处可能会变得更加显着。

回答 3 投票 0

字体很棒图标在更改字体时消失

我正在尝试在我的网页中加入字体很棒的图标,一切正常,直到我更改为我选择的字体 Exo 2,并且图标显示为带边框的正方形。它与其他 f 配合得很好...

回答 3 投票 0

Google Font 在中国导致页面加载速度非常慢

我在我的网站上使用 Google 字体。一些中国客户表示该网站加载速度非常慢。我查了一下,是谷歌字体造成的。我查看了 Google 字体常见问题解答,他们说它会...

回答 2 投票 0

如何将 Google 字体添加到 jekyll 主题

我有一个使用 minima 主题的简单 jekyll 网站。 该网站的简单 index.md 文件如下所示: --- 布局: 家居 --- # 一个用于测试东西的简单网站 接下来的两行应该在

回答 1 投票 0

google 字体使中国页面加载速度非常慢

我在我的网站上使用 Google 字体。一些中国客户表示该网站加载速度非常慢。我查了一下,是谷歌字体造成的。我查看了 Google 字体常见问题解答,他们说它会...

回答 2 投票 0

如何在next.js13中导入多个字体粗细?

我正在尝试从@next/fonts/google 导入 Poppins 字体粗细。但我需要定义字体粗细,因为 Poppins 不是可变字体。 这是我到目前为止所拥有的。 const poppins = 流行...

回答 3 投票 0

在 Angular 中使用谷歌字体会引发网络错误 [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]

我看到很多这样的网络错误: > 请求网址:https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300[_ngcontent-c6];400[_ngcontent-c6];600[_ngcontent-c6];700&

回答 3 投票 0

对 Google 字体 API 的许多请求

从页面源代码中我可以看到有两个对fonts.googleapis.com的引用

回答 0 投票 0

为什么谷歌字体不起作用?

我正在使用 http://www.google.com/webfonts/earlyaccess 中的 Google 字体,但它没有按预期工作。有任何想法吗。 我在 http://jsfiddle.net/UbDcg/4/ 设置了一个基本版本,但它不起作用

回答 4 投票 0

如何关闭本地字体来测试google字体?

现有技术: 我可以在 Chrome 中禁用本地字体吗? https://superuser.com/questions/292666/how-to-disable-permission-to-read-system-fonts-and-browser-plugin-details-in 有没有办法禁用sy...

回答 4 投票 0

列出来自 Google Fonts API 的所有可变字体?

我需要通过 Google Fonts API 获取所有可用可变字体的列表。 我可以从此端点获取所有字体名称。您可以添加一些参数,但我认为不是...

回答 2 投票 0

Google字体将(c)变成©

我在我的 React 应用程序中使用以下谷歌字体: https://fonts.google.com/specimen/Manrope?preview.text=(c)&preview.text_type=custom 并且,如标题所示,浏览器(或字体本身?),tur ...

回答 1 投票 0

谷歌字体的 CSS 在其 WOFF2 文件中撒谎:我如何在运行时/渲染时知道这一点?

上下文 我正在开发一款需要动态分析和应用来自 Google 字体的字体的应用程序。其中一部分包括阅读 unicode-range CSS 属性以:首先,了解哪个字符...

回答 0 投票 0

Flutter/如何获取谷歌字体家族列表

您好,我正在使用 Flutter 开发应用程序。 为了管理我的应用程序中的字体,我正在使用 https://pub.dev/packages/google_fonts 包裹。 所以我计划让用户可以选择他们想要的字体。 有什么办法我...

回答 2 投票 0

在 RenderHTML 中使用斜体谷歌字体

我有一个使用 Expo 的 React Native 项目,我通过 @expo-google-fonts 和 react-native-render-html 使用 Google 字体。 正确加载我的字体和所有内容后,我无法获得斜体...

回答 0 投票 0

检查google字体链接是否有效的正则表达式?

我需要一个匹配google字体链接元素的正则表达式。对于ex :-来说,我需要一个匹配google字体链接元素的正则表达式。

回答 1 投票 0

Google Fonts图标和css CDN链接的区别?

family=Roboto/fonts.googleapis.comiconhttps:/fonts.googleapis.comcss我在使用Google Fonts的Google Material Icons CDN时注意到了这一点。一些来源列出的字体......

回答 1 投票 0

Google字体获取速度太慢

我正在使用React和Material UI构建Web应用。我使用roboto字体家族,并通过这种方式在index.html文件中获取它:

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.