有没有一种方法可以导入比其他字体更大或更小的字体？

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

您是否尝试在整个网站中使用 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;
}

Answer 2

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

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

选项 1

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

选项 2

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

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

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

你的情况听起来也与这个答案相似，你只是想区分有限数量的语言：

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

选项 3

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

有没有一种方法可以导入比其他字体更大或更小的字体？

Is there a way to import a font at a larger or smaller size relative to other fonts?

css

fonts

font-size

webfonts

font-face

选项 1

选项 2

选项 3