如何从Google字体的网络字体中获取真正的大写字母

时间:2019-04-16 05:01:22

标签: css webfonts typography google-webfonts

我在网站上使用Google字体中的Alegreya font family。似乎Google去除了大写字体功能,因此,尽管Alegreya 具有小写字体(见下文),但它们似乎不适用于Google字体。在这种情况下如何获得true small-caps(来自Google字体的字体)?

Alegreya中具有真正的小型大写字母(作为OpenType功能),并且还有一个姊妹小型大写字母家族Alegreya SC。我已经从两个家族(直接从Google字体)下载了Regular字体,并将Alegreya-with-small-caps与Alegreya SC进行了比较。它们是相同的,例如,Alegreya 与姐姐拥有相同的小写字母。但是当我在下面尝试CSS时:

.variant-smcp {
  font-family: Alegreya, serif; /* Alegreya from Google Fonts */
  font-variant: small-caps; /* should use OpenType smcp feature */
}

我只会得到假冒的小写字母(例如,浏览器缩小了资本)。

一种解决方法是同时导入Alegreya和Alegreya SC,并使用后者而无需在需要时设置任何font-variant。但这对我来说是一个大问题:它将请求的字体数量 doubles 加倍。总体而言,如果我的字体已经包含,那么为小写字母导入另一种字体似乎有点笨拙。

编辑:我还使用font-feature-settings: "smcp" on;进行了测试,结果完全相同:使用支持smcp的字体(Alegreya)伪造的大写字母。我已经在Firefox 66(适用于Windows和Android)中测试了所有这些功能,结果完全相同。 (感谢@Parapluie)

1 个答案:

答案 0 :(得分:0)

您可能不想听到的答案是:如果要一起使用Alegreya和Alegreya SC,则必须从单独的字体文件中加载它们。但是,有一些方法可以减轻附加文件中的服务器负载。

首先,为什么要使用单独的文件:这是印刷原因。小心翼翼地剪下那些小帽子,以保留字形的美。伪小型大写字母只是大胆地“缩小”了大写大写字母,它通常以笨拙的外观出现。

  

但这对我来说是一个大问题:它将请求的字体数量加倍。

您会遇到与550年前的威尼斯打印机相同的问题。如果他想要小盖,他必须购买和存放一个带22磅铅字符的全类型抽屉。还是他?

如果仅使用小写大写字体中的几个字形,则有可能可以加载字体的子集,以避免字体字形加倍并减少字形。您的负载重量。

要使用Google Fonts API实现此目的,请在选择字体后,点击“选定的1种字体”标签,然后选择自定义。在这里,您可以将字体选择减少到所需的大小和语言,从而减小文件大小。

要使用从服务器加载的字体来实现此目的,请考虑使用某种形式的字体子设置工具,如下所述:

Which Fontfile to use in a website?

希望这会有所帮助。