google-font-api 相关问题

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

Google 字体外部CSS Vs 在我的CSS 中复制外部CSS 的代码?

我通过添加外部链接来使用谷歌字体 这个CSS只有这段代码 @font-face { 夫...

回答 4 投票 0

如何从 Google Fonts 下载 WOFF 文件? [已关闭]

Google Fonts 似乎只提供 WOFF2 中的字体。 虽然这在 Chrome 上运行良好,但许多其他浏览器似乎不支持 WOFF2 有没有办法直接链接到谷歌字体主机...

回答 4 投票 0

Google 字体可以在本地主机上工作,但不能在实时服务器上工作

我将谷歌字体“Raleway”添加到我的 Nextjs 应用程序中。运行 npm build 后,字体在我的本地服务器中发生了更改,但在实时环境中没有显示。 请指教。 请帮忙 导入{...

回答 1 投票 0

将 Google 字体添加到 XSLT 中的 <head>

我正在使用 Google Search Appliance 来过滤搜索结果,并且该页面是用 XSLT 编写的。我想链接到 中的 Google 字体,但无法管理。 HTML: 我正在使用 Google Search Appliance 来过滤搜索结果,并且该页面是用 XSLT 编写的。我想在 <head> 中链接到 Google 字体,但无法管理。 HTML: <head> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'> </head> 我尝试过的XSL: <xsl:template name="addOpenSansStart"> <xsl:text disable-output-escaping="yes">&lt;head&gt;</xsl:text> <xsl:element name="link"> <xsl:attribute name="href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'">href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'</xsl:attribute> <xsl:attribute name="rel='stylesheet'">rel='stylesheet'</xsl:attribute> <xsl:attribute name="type='text/css'">type='text/css'</xsl:attribute> </xsl:element> </xsl:template> <xsl:template name="addOpenSansEnd"> <xsl:text disable-output-escaping="yes">&lt;/head&gt;</xsl:text> <xsl:text> </xsl:text> </xsl:template> 还有: <xsl:template name="addOpenSansStart"> <xsl:text disable-output-escaping="yes">&lt;head&gt;</xsl:text> <xsl:text disable-output-escaping="yes">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css' /&gt;</xsl:text> </xsl:template> <xsl:template name="addOpenSansEnd"> <xsl:text disable-output-escaping="yes">&lt;/head&gt;</xsl:text> <xsl:text> </xsl:text> </xsl:template> 两者都给了我错误元素类型“link”必须由匹配的结束标记“</link>”终止。 您会很高兴得知您可以简单地包含要生成的文字标记: <xsl:template name="addOpenSansStart"> <head> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'/> </head> <!-- the rest of your template --> </xsl:template> 如果您确实需要使用 xsl:element 和 xsl:attribute,请意识到 name 属性不应包含该属性的值: <xsl:template name="addOpenSansStart"> <head> <xsl:element name="link"> <xsl:attribute name="href">https://fonts.googleapis.com/css?family=Open+Sans:400,300,600</xsl:attribute> <xsl:attribute name="rel">stylesheet</xsl:attribute> <xsl:attribute name="type">text/css</xsl:attribute> </xsl:element> </head> <!-- the rest of your template --> </xsl:template> 无论哪种方式都适合您。 请注意,如果您需要添加添加 Google 字体时经常使用的预连接链接,或者您想要导入多种字体,则需要通过以下方式编辑这些字体以确保它们是有效的 XHTML/XML: 将所有与号“&”替换为“&” 在“crossorigin”后面添加一个等号,后跟两个双引号 在所有自关闭链接元素的末尾添加尾部斜杠 例如以下 HTML: <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=Open+Sans:wght@400&family=Raleway:wght@400&display=swap" rel="stylesheet"> 需要转换为: <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=Open+Sans:wght@400&amp;family=Raleway:wght@400&amp;display=swap" rel="stylesheet"/>

回答 1 投票 0

为什么我的 Google 字体不起作用?

我的 Google 字体似乎无法正常工作。我的 WordPress 主题附带了一个自定义的 Googlefonts.php,它使用此代码来请求字体: foreach($googlefonts 作为 $getfonts) { 如果(!

回答 1 投票 0

为什么我的 Angular Material 图标看起来与 Google Fonts 图标不同?

我正在开发 Angular 15 项目,我注意到我使用的 mat-icon 组件看起来与 Google Fonts Icons 网站 (https://fonts.google.com) 上显示的图标不同/ico...

回答 1 投票 0

如何通过 CSS 使用来自 CDN 的 Google Noto Color Emoji 前端

我有什么方法可以使用来自 CDN 的 Google 彩色表情符号字体吗?我试图在 jsfiddle 中使用它,但不知道如何使用。

回答 3 投票 0

图标按钮在加载前初始渲染时显示文本 - 谷歌字体

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <span class="material-symbols-outlined"> delete </span> 初始阶段显示原始文本,一段时间后显示图标,我们如何解决这个问题? 您可以在参数中设置 display,其作用与 CSS font-display 属性相同。 在此处了解更多信息。 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block" /> <span class="material-symbols-outlined"> delete </span> 将 &display=swap 附加到 https://fonts.googleapis.com/... 资源 URL 的末尾,它将告诉浏览器将图标作为块元素短暂加载,直到正确加载字体文件。 至少,这是几年前流行时的想法。 从那时起,许多开发人员开始使用 display=block 来减少移位,因为“交换”使用的默认“块”周期通常很短,以至于有时无效...... 更多:https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/ 比较字体显示选项:https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

回答 2 投票 0

Google Fonts 提供单个 woff2,但 webfonts-helper 和 github 提供数十个 woff2 文件

我希望在本地托管一些字体,我之前一直在 Google Fonts 中使用这些字体。 我注意到所有帮助文章都指向 google-webfonts-helper 但结果却截然不同。 与G...

回答 1 投票 0

“无法从 Google 字体获取字体资源”

从指定URL获取字体文件的请求多次失败。 具体网址:https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2 和 https://f...

回答 1 投票 0

Playfair 显示字体看起来不同

我在我的项目中使用谷歌字体的 Playfair Display 字体,但字体看起来与谷歌字体不同。我已经搜索过,但无法修复。我在我的项目中使用 Next JS 和 Tailwind。 这是我的c...

回答 1 投票 0

有什么想法为什么<strong>标签不起作用而CSS却起作用吗?

一些标题 。大胆的 { 字体粗细:粗体; } 这大胆地呈现,但是: 一些标题 才不是。 它只是正常渲染...

回答 6 投票 0

如何使用本地 Google Fonts 模块和 Tailwind 设置 Nuxt?

我似乎无法在我的应用程序中渲染衬线字体“Source Serif Pro”。我还设置了“Roboto”,它渲染得很好。我在顺风配置中尝试了几种不同的方法...数组...字符串...

回答 2 投票 0

强制 Google Web 字体使用“ct”连字

我在我的项目中使用字体 IM Fell English:https://fonts.google.com/specimen/IM+Fell+English?selection.family=IM+Fell+English 它支持“长 s”ſ 和其他常见连字...

回答 1 投票 0

Google 字体无法在 React Vite 中使用 tailwind CSS 工作

我正在用头撞墙。我的项目是在 React 中配置的 Vite 和 tailwind CSS。现在我想在 tailwind CSS 中使用 Google 字体。由于某种原因它不起作用。所有教程...

回答 1 投票 0

如何在 Flutter 中降级 google_fonts 版本

所以我只是在构建一个应用程序,我意识到我不断收到错误。该错误来自我安装的 google_fonts 包。显然,google_fonts^6.2.0 昨晚刚刚下降......

回答 1 投票 0

为什么我无法使用 Google 字体? [已关闭]

所以我尝试在html页面的头部进行链接并在我的css文件中使用@import,但是我尝试使用的字体仍然无法加载。我还检查过以确保我没有运行任何插件...

回答 2 投票 0

故事书中未加载谷歌字体

我已经关注了 stackoverflow 和 github 上的文档和其他答案,并阅读了故事书文档。 我有 React 故事书,想要导入 Manrope 字体。根据仪器...

回答 1 投票 0

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

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

回答 2 投票 0

从 Google 字体中选择所有样式

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

回答 3 投票 0

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