如何从Google字体中获取来自webfont的真正小型大写字母

问题描述 投票:2回答:1

我在一个网站上使用谷歌字体的Alegreya font family。 Google似乎剥离了小型大写字体功能,因此虽然Alegreya有小型大写字母(见下文),但它们似乎不适用于Google字体。如何在这种情况下获得true small-caps(来自Google字体的字体)?

Alegreya拥有真正的小型大写字母(作为OpenType功能),还有一个姐妹小型大写字母系列,Alegreya SC。我从两个家庭(直接从谷歌字体)下载了常规字体,并将Alegreya与小型帽子与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。但这给我带来了一个大问题:它使请求的字体数量增加了一倍。总的来说,如果我的字体已经有了这些,那么导入另一种字体只是为了小型大写似乎有点笨拙。

编辑:我也测试过使用font-feature-settings: "smcp" on;,结果完全相同:假小盘,来自smcp的字体(Alegreya)。我已经在Firefox 66(适用于Windows和Android)中测试了所有这些内容,结果完全相同。 (谢谢@Parapluie)

css webfonts typography google-webfonts
1个回答
0
投票

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

首先,为什么单独的文件:这是一个排版的原因。这些小帽子经过精心切割,以保留雕文的美感。伪小帽只会“大幅度”缩小较大的帽子而且通常会看起来像一个看起来笨拙的kludge。

但这给我带来了一个大问题:它使请求的字体数量增加了一倍。

你有一个威尼斯打印机550年前遇到的同样问题。如果他想要小帽子,他必须购买并存放一个22磅铅字符的全抽屉。或者他呢?

如果您只使用小型大写字体中的一些字形,则可能存在加载字体子集以避免加倍字体字形并减少负载重量的可能性。

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

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

Which Fontfile to use in a website?

希望这会有所帮助。

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