为什么我的 Google 字体大写字母显示太浅？答案

【问题标题】：Why are my Google font uppercase letters displaying too light?为什么我的 Google 字体大写字母显示太浅？
【发布时间】：2022-01-15 01:56:08
【问题描述】：

在本网站使用谷歌字体，一些大写字母与小写相比太轻（假装）。请参阅此处的文字：

https://katherinesolomon.com/farm-animals/

这个问题似乎对窄大写字母的影响大于对宽字母的影响。系统字体（如 arial）不显示此问题。

目前该网站使用的是 Google 字体“Dosis”。我尝试用其他 Google sans-serif 字体替换，但这并不能解决问题；其他选择显示了同样的问题。我尝试过替换不同的字体粗细，但这也无济于事。

这似乎与浏览器或设备无关。

谁能找出问题和解决方案？

【问题讨论】：

Dosis 是可变字体。您是否尝试过不在加载谷歌字体的标题链接中包含weigth 信息？
@Johannes - 好主意；我试过了，没有任何区别。
@Ana Gauna - 谢谢，但我正在尝试使用 Google 字体而不是系统字体。我已经为 body 标签编辑了 CSS，尝试了几种不同的 Google 字体，还尝试了系统字体。我尝试过的所有 Google 字体都存在问题，而没有任何系统字体。

标签： fonts google-fonts font-rendering

【解决方案1】：

我终于明白了。问题在于指定选择性文本。 Google Fonts API 不允许在多个系列之一中选择文本。

这不起作用：

<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&family=Playfair+Display&text=KATHERINE%20SOLOMON&display=swap" rel="stylesheet">

相反，您必须像这样将调用分成两部分；这行得通：

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&text=KATHERINE%20SOLOMON&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap" rel="stylesheet">

虽然这需要两次调用 Google 字体，但它仍然比请求两者的完整家族更快。

【讨论】：

【解决方案2】：

您可以更改网站上使用的默认 CSS 设置。在 style.css 文件中，您可以更改默认字体名称、更改默认字体大小、更改您要在网站上使用的默认字体颜色。

.body { font-family: Arial, Helvetica, sans-serif;字体大小：12px；颜色：黑色; }

例如。

【讨论】：