google-webfonts 相关问题

Google Web Fonts项目的目标是为全世界创建核心Web字体目录，并提供API服务，以便任何人都可以为其网页带来高质量的排版。

我正在使用 2 个谷歌字体系列并将它们声明为：我正在使用 2 个谷歌字体系列并将它们声明为： <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet"> 我想添加一种字体系列（Parisienne），我只需要与号字符（&）。我知道这可以使用“文本”参数来完成（https://developers.google.com/fonts/docs/getting_started）。但是，如果可能的话，我想将其添加到现有的链接标签中。我尝试过以下方法： <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700|Parisienne&text=%26&display=swap" rel="stylesheet"> 但是这样做似乎将逻辑编写为“加载所有 3 个字体系列，但仅加载每个字体系列的 & 字符”。这是预料之中的，但我至少想尝试一下。我对此进行了测试，实际上每种字体中唯一有效/下载的字符是＆符号为了使其工作，我有 2 个单独的链接元素： <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Parisienne&text=%26&display=swap" rel="stylesheet"> 有没有办法只使用一个链接标签并让它加载整个 Roboto 和 Monteserrat 系列以及 Parisienne 系列的 & 字符？如果没有，那么有 2 个单独的链接标签就可以了，但如果有什么方法可以只用一个链接标签来做到这一点，那么知道如何做就好了。根据 Google 的说法，key text 计算整个请求 URL。因此，我们无法通过单个 <link> 来实现这一目标。正如 Leo 所解释的，Google 字体 API 目前不支持单个查询中的多个 text 参数。值得注意：API 会忽略后续查询参数并采用第一个： https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&text=Hi&family=Roboto:wght@400;700&text=hamburgefonstiv Montserrat 和 Roboto 都是“Hi”的子集。在您的具体情况下，您可以通过为“Parisienne”创建一个 base64 编码的独立 @font-face 规则来减少请求数量。 body { font-family: Montserrat; font-weight: 700; font-size: 5em; } /* ampersand subset */ @font-face { font-family: Parisienne; font-style: normal; font-weight: 400; src: url("data:font/woff2;base64,d09GMgABAAAAAAR8ABAAAAAAB4gAAAQlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGwwcGAZgADwIAgmCYREICoJUgnELCAABNgIkAwwEIAWEQAcgDAcbiAbIxIf/Tr9zZ1IziztN65mSESrMPKcQ011PF8ZdGEnW+JIzcE5d4FtgIforLR4RVkERCfiLFFBE0sFPelC8SnhdOuPFjo4CARCuqnCTJSOHTLoXpxEKeQXPvUbOQhDAPcqpEMrTTiHyMYa5b7agEKgEpB7IcgyVM895MLRZrNCDIjuk698pIKSLPxdUFAD3TnCy4aDQ5LMBvCtL1BRE42mQCwbbCbjchkCASZIr8HngIwblf1c+g+hiYe3yXYScoTxIAicy89F3hfGHD0mMiJRaxsyMHJEYJzKSL0iMF6mV8VnWTlmnUJWqjkGVWumoe5Bpsqw0vlPWDalKEWXoksfU5G5ZYHpF60UOKUqtxDRFwBqtqsBExzPD46SM+09iQaLrcz67Xe6QmcesZXqzohUEamFPtsvsSbNWUBSJBbcvhlLL1lhqS4GQcHC+xEJzz+iSmV7LoKjqwxKdwDyqqlV1iibgya4PEih8+izGZ1keJJ72j06PTtDiJJ2gExStoJglFia6umSLWSuIXAkEJBBAzDKgE1XwRbatqp6eBJUGdwP8vvj4jQci9rxeLzzvvvtuuOrz+TpFNNn1+/19V8juiD3vW9+vefdd+9Ver9fwht/vJ7tXJNvOv/qTrvkplRGxl+7z+cLVezPnXwQTHp3rbUQv7N7x+MvhqvJXXJ7m9/v9Trf4Z0njku6AscrdWFWs9OiXMizt52Sc0LDaW24Xrsrum7hQPNwsDtW6zIsL+y60dR5zUBpx3bi+dJG+paRNO3uMIas8v9NpGqxaLNoSv3kgf6vO07zz0u6hHvOR7JGK3E+DpdqX8qpy5uwTw+5v7+nvm2ia1zWU7k+zlOd11pTlNVvK5fTipAHuw4Yfphs6mosO15fRXqt+StdiPvnoH5M7Npo80nGln6RIA8/lVc/nHzhQe85IbJyw79hbG090th8EAKxvgMyIOfG6jcMx9b+FRmxG1yslt/57Gte0ecV/k/9ORdlDuiRF2A6i2cKdVhR5/X+T/z4YZd8nYj/IczJguILvRe6PfB4/IQS/IZgHhDs5kIWYJHsohvekQRNWsOqDG0KQiOcRDtF4EOFhxXyr5jcShHTISDAyUf5uNMoBjGIRi5hFLYpQhAUMYB5jmMUieIVYuG4ShZjBPEZQhDZY0Yx2uB3qx7ghTGMaQ5DQSaERLGESoV4MYf4nOBNNUYJCFAfTDVjAIsYwgim4L788gFwY0AYLuuFAHmpBy6c+DVeKYpSgtKaqzGgTZjCLNVKM9LE/RS4GkFdCgKIfa6QwMhTuVoJO6oVqM1UaVXpoBQuYYMnMWm8DaA86UY16bHdzOukhzBMoxABmsC0PIihWMIZFjIL2T7EwhtnLGMIgomBtEdULWStGn8IQKDJ6rso4LkZC4EQkwqePa73mdAA=") format("woff2"); } .roboto { font-family: roboto; font-style: normal; font-weight: 400; } .parisienne { font-family: Parisienne; font-style: normal; font-weight: 400; display:inline-block; margin-right:-0.2em } <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet"> <p>Tom <span class="parisienne">&</span> <span class="roboto">Jerry</span></p> 您可以使用像transfonter这样的转换器工具来获取base64编码的字体源。您也可以测试我自己的 fontkit 助手 “fontkitty” – 免责声明：我是作者。此外，您需要将 & 符号手动编码为 %26 - 我需要尽快解决这个问题。

html fonts google-webfonts

回答 2 投票 0

无法在 Google Fonts 上设置字体粗细

这个问题已经被问过很多次了，但没有一个对我有用。例如： Google 字体 font-weight 为 100 不起作用。（我的

css fonts google-webfonts

回答 8 投票 0

如何从（官方）Google Web Fonts 存储库下载多种格式的网络字体？

我了解到 Google 根据访问的浏览器/设备自动提供 TTF、EOT、WOFF 或 SVG 字体文件。现在我计划从我的服务器托管和提供字体文件

webfonts google-webfonts

回答 6 投票 0

wordpress 6 theme.json 自定义字体不起作用

我遵循二十二十二主题，并添加到我的自定义主题中：我的资产/字体文件夹中有我的 woff2 字体。在我的 theme.json 中的设置 -> 版式 -> fontFamilies 中...

wordpress google-webfonts

回答 2 投票 0

为什么 Flutter web 会从 google 加载字体？

为什么 flutter 会加载第 3 方字体？正在 Chrome 中检查我的应用程序... ^^ 最后两个是从 Google 加载的。即使我只指定一种字体：扑：字体： # https://fonts.google.com/...

flutter google-webfonts

回答 1 投票 0

如何通过 CSS 使用来自 Google 字体的特定字体样式（即细、超轻..）

Google 提供的字体（如 Montserrat）有很多不同的样式：薄型、超轻型、轻型、常规型等... 我找不到用 CSS 指定样式的方法。使用 Font-weight 只能访问所以...

html css fonts google-webfonts

回答 3 投票 0

如何使用 github 托管网络字体？

更新：我使用了@brclz建议，像这样解决我的问题：复制了该家族各个字体文件的GitHub地址，例子： https://github.com/h-ibaldo/Raleway_Fixed_Numerals/blob/maste...

github fonts webfonts truetype google-webfonts

回答 2 投票 0

Google Chrome 浏览器中的文本垂直对齐错误

我在创建“按钮”元素（带边框的内联块容器中的文本）时遇到问题，因为在某些字体大小文本中垂直对齐错误（不是完美的中间）。我想使用 Raleway (...

css google-chrome fonts vertical-alignment google-webfonts

回答 3 投票 0

如何对 Google 图标字体进行子集化以获得最佳下载大小？

Google 包含有关如何对字体进行子集化的说明，甚至指定：此功能也适用于国际字体，允许您指定 UTF-8 字符。例如，¡Hola！代表...

css fonts google-webfonts

回答 1 投票 0

可变字体托管、语法以及为什么 Google 不提供用于自托管可变字体的 WOFF2 下载？

我在这里不知所措。尝试将 google 变量 webfont (open sans) 添加到我的网站。选择字体时，Google 只会为静态 CSS 字体创建。为什么？（分号，不...

css fonts google-webfonts

回答 1 投票 0

HTML/CSS - Google Font Fira Sans 渲染

我的页面设计师向我发送了他的作品，包括 Fira Sans 谷歌字体。所以我在我的笔记本电脑和办公室电脑上的渲染效果很差......但在我家里的电脑上却很好。全部都安装了Windows...

html css fonts google-webfonts

回答 2 投票 0

Google Web 字体无法在 iOS 版 Chrome 中加载

当我使用 Google Webfonts 时，它们在我关心的每个浏览器上都能正常加载，除了 Chrome/iOS。这看起来很奇怪，因为它在 Mac 版 Chrome 和 iOS 版 Safari 上运行良好，所以我不认为这是 iOS 问题...

ios css google-chrome responsive-design google-webfonts

回答 8 投票 0

包括 Google 字体链接或导入？

在页面上包含 Google 字体的首选方式是什么？通过标签在页面上包含 Google 字体的首选方式是什么？通过 <link> 标签 <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=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 通过样式表中的导入 @import url('https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&display=swap'); 使用Web字体加载器对于 90% 以上的情况，您可能需要 <link> 标签。根据经验，您希望避免 @import 规则，因为它们会推迟所包含资源的加载，直到获取文件为止。如果您有一个“扁平化”@import 的构建过程，那么您会产生另一个问题使用网络字体：像 Google WebFonts 这样的动态提供程序提供特定于平台的字体版本，因此如果您只是内联内容，那么您最终会在某些平台上看到损坏的字体。现在，为什么要使用网络字体加载器？如果您需要完整控制字体的加载方式。大多数浏览器会推迟将内容绘制到屏幕上，直到所有 CSS 都下载并应用 - 这避免了“无样式内容的闪烁”问题。缺点是..您可能会有额外的暂停和延迟，直到内容可见。使用 JS 加载器，您可以定义字体如何以及何时变得可见。例如，您甚至可以在原始内容绘制在屏幕上后将它们淡入。再次强调，90% 的情况是 <link> 标签：使用良好的 CDN，字体会快速下载，甚至更有可能从缓存中提供。如需了解更多信息并深入了解 Google Web Fonts，请观看此 GDL 视频如果您关心 SEO（搜索引擎优化）和性能，最好使用 <link> 标签，因为它可以预加载字体。示例： <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin> <link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin> <style> @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } </style> 欲了解更多信息，请阅读以下内容： https://ashton.codes/preload-google-fonts-using-resource-hints/ 使用Google提供的<link>，因为字体有版本控制，但在其上方使用HTML5的预连接功能要求浏览器打开TCP连接并提前与fonts.gstatic.com协商SSL。这是一个示例，显然需要驻留在您的 <head></head> 标签中： <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 我理解其他答案的建议是在 html 文件中使用 <link>。我最近意识到我可以在 css 文件中使用 @import 的用例。原因很简单：我正在为我的业余项目制作静态网站，并且我更看重便捷的方式而不是 SEO 或对稀有平台的兼容性等。在css文件中使用@import的好处是，如果我想改变字体，我需要做的就是修改css文件中的几行。就这样，故事结束了。如果我在html文件中使用<link>，除了更改css文件中的字体外，我还必须更新并上传所有html文件，这有点不方便。长话短说：@import独立于css文件内，方便更新。它对于测试和尝试不同的字体特别有用。感谢所有精彩的回答。我最近在 React 应用程序项目中的经验也与公认的答案一致。如果您从 CDN 加载，最好使用 link。如果字体位于您的本地目录中，那么使用 import 或 link 加载它不会有太大的显着差异。但如果您使用第三方 CDN 加载它，那么最好使用 link。它更快，您将获得预加载和缓存支持。我个人更喜欢<link>。这就是我上传字体的方式： <link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

fonts webfonts google-webfonts

回答 6 投票 0

字体显示奇怪+字符

我正在做一个项目，我在我的页面上使用了高棉语（高棉语是柬埔寨的一种语言）。我使用来自谷歌字体的链接添加了语言，但在文本的某处它显示...

css wordpress frontend font-family google-webfonts

回答 1 投票 0

Uploading Font as JSON on Server to call for WebApp: Specific Example for Dissolving font

如何将此链接上的“FUTURE IS NOW”字体更改为Helvetica： https://codepen.io/sanprieto/pen/XWNjBdb 作为参考，当前代码行在第 8-10 行的 js 窗口中：

javascript json responsive-design google-webfonts webfont-loader

回答 0 投票 0

开发工具正确显示CSS字体，但显示的字体不正确。

Wordpress没有在网站标题上显示正确的字体。当我检查时，它显示有正确的字体（Tangerine）应用，但实际上这不是页面上显示的字体。要...