有没有办法以相对于其他字体更大或更小的字体导入字体？

Question

我正在开发一个网站，该网站对大多数语言环境使用一种字体，在日本，该网站对日文字符使用特定字体，两者都是使用 @font-face 规则导入的，并使用字体堆栈进行控制，拉丁字体不包含日文字符，因此使用日文字体。

@font-face {
  font-family: "Latin-font";
  src: url("./latin-font.woff") format("woff");
}
@font-face {
  font-family: "Japanese-font";
  src: url("./japanese-font.woff") format("woff");
}

body {
    font-family: "Latin-font", "Japanese-font", sans-serif;
}

这些字符在整个网站中经常混合使用，我们可能有这样的文字：Fooフーbarバー。我们的设计师注意到，由于我们使用的字体，拉丁字符的大小与日文字符不成比例。他们希望所有拉丁字符在整个网站上显示得稍大一些。

这是他们想要的视觉示例：

为了实现这一点，我将拉丁字符包裹在 span 中，这在此处用于演示，但由于网站的个人贡献者数量众多，因此无法大规模实现这一目标。相反，如果可能的话，最好以特定大小导入字体。

我尝试过查看MDN documentation 并尝试了一些具有font-stretch 和font-variation-settings 等属性的原型，但我无法使一种字体比另一种更大。

有什么方法可以实现吗？我现在能看到的唯一选择是更新字体文件本身，增加每个字符的大小。

Answer 1

我认为您已经很好地评估了这一点。你可以：

1. 选择一个专为处理日语和拉丁字形而设计的字体系列，或
2. 尝试在代码中创建基于语言的spans，作为 CMS 或构建过程的一部分，或者
3. 如果您的许可证允许，请尝试修改字体本身

选项 1

如果您正在处理的网站将同时包含大量日文和拉丁文文本，解决此问题的最佳方法可能是切换到可以同时处理拉丁文和日文的字体系列。然后，除了字形的相对大小之外，权重和行高指标也将匹配。

选项 2

font-size-adjust 是为这种情况设计的，但实际上它仅在撰写本文时在桌面版 Firefox 中真正有效：https://caniuse.com/font-size-adjust The MDN page 有点误导，因为它位于用于大多数浏览器。

即使支持，您可能仍需要spans，正如您所描述的那样。

根据您的 CMS 或构建过程，您可以尝试使用这样的库：https://github.com/patrickschur/language-detection

您的情况听起来也与此答案相似，您只想区分有限数量的语言：https://stackoverflow.com/a/22403736

使用这些，您可以生成所需的 spans，而无需您的作者考虑。

选项 3

如果您的许可证允许，请尝试修改字体本身。您可能需要为此打开一个专门的问题，因为它在很大程度上取决于您有权访问的源文件的格式。例如，下面是它想要make this modification in FontForge 的快速概述。这还取决于对源文件的访问权限，以及字体的开源许可证或允许衍生作品的其他许可证。

Answer 2

您是否在整个网站中尝试将 rem 作为字体大小单位？

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Latin-font", "Japanese-font", sans-serif;
  font-size: 1rem;
  font-weight: 400; /* or your font-weight */
}

/* font-size relative to the root, for example */
#header h1 {
  font-size: 2.5rem;
}