如何合并字体？

Question

我有很多字体，

• OpenSans-bold.ttf
• OpenSans-boldItalic.ttf
• OpenSans-extrabold.ttf
• OpenSans-斜体.ttf
• OpenSans-light.ttf

我将如何继续只创建一个文件，而不是创建这么多不同的文件？ 也许像我通常那样在 CSS 上使用它们，或者像在 Photoshop 上一样？

例如

small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}

如有任何帮助，我们将不胜感激。

Answer 1

如果您想使用不同的字体（常规、斜体、粗体等），则需要不同的字体文件，因为每种字体都是作为单独的字体文件实现的（实际上，您甚至需要不同的字体格式，以覆盖不同的字体）浏览器）。

但是您可以将它们用作单个字体系列，就像您只使用Arial并对其应用斜体和粗体，直接或间接使用CSS（通过HTML，例如

h2

元素默认为粗体） 。为此，您需要声明一个字体系列。

例如，FontSquirrel 生成 CSS 代码，将每种字体定义为字体系列。这是可能的，但不合逻辑且不方便。例如，它生成

@font-face {
    font-family: 'open_sansbold';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

为了使事情更符合逻辑，请更改

font-weight

值，并将

font-family

名称更改为您在不同

@font-face

规则中使用的名称（针对系列的不同字体）。例如，

@font-face {
    font-family: 'Open Sans';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Answer 2

将多种字体组合到一个文件中的一种简单方法是将它们编码为 Base64 并将它们嵌入到 CSS 中。但它们仍然是“不同”的字体，并且总大小会增加。有各种在线工具可以为您上传的字体文件创建 CSS，例如这个。

Answer 3

可变字体实际上支持一种使用“合并”权重的方法。

有一个问题：可变字体还需要更多数据来定义多个设计轴。

换句话说：一些选定的粗细和/样式

可能
仍然小于单个（高度复杂的）可变字体文件。 Open Sans：VF 与静态

可变字体：宽度和粗细轴 87+82 KB（常规、斜体、所有宽度、拉丁语、woff2）~ 169 KB

• 静态字体文件：常规、斜体、粗体、粗体斜体 ~ 132 KB（通过
google 网络字体助手
• 加载）
节省：可变字体总共大了 37 KB – 尽管可变字体版本还包括所有“压缩”版本和中间字体。

如果使用变量“Open Sans”，与完整的样式范围相比，您实际上可以节省一些 KB - 但对于具有更多设计轴的字体（例如 Roboto Flex），节省的效果可能并不那么令人印象深刻。此外，分割字体加载可能会整体降低 FOUT 效果，因为页面的第一个视觉部分可能只需要常规和粗体样式/粗细。

/* regular */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v40/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2) format('woff2');
}

/* italic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v40/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
}

body{
  font-family: 'Open Sans';
  font-size:10vmin;
}

.wgh100{
font-weight:100
}

.wgh200{
font-weight:200
}

.wgh300{
font-weight:300
}

.wgh400{
font-weight:400
}

.wgh500{
font-weight:500
}

.wgh600{
font-weight:600
}

.wgh700{
font-weight:700
}

.wgh800{
font-weight:800
}

.cnd75{
font-stretch:75%;
}

.cnd80{
font-stretch:80%;
}

.cnd85{
font-stretch:85%;
}

.cnd90{
font-stretch:90%;
}

.cnd95{
font-stretch:95%;
}

<p>Hamburgefonstiv</p>
<p class="cnd75 wgh100">Hamburge<em>fonstiv</em></p>
<p class="cnd75 wgh200">Hamburge<em>fonstiv</em></p>
<p class="cnd75 wgh300">Hamburge<em>fonstiv</em></p>
<p class="cnd75 wgh400">Hamburge<em>fonstiv</em></p>
<p class="cnd80 wgh500">Hamburge<em>fonstiv</em></p>
<p class="cnd85 wgh600">Hamburge<em>fonstiv</em></p>
<p class="cnd90 wgh700">Hamburge<em>fonstiv</em></p>
<p class="cnd95 wgh800">Hamburge<em>fonstiv</em></p>

总而言之：这不是“火箭式”装载效率的银弹解决方案，但如果您需要大量中间重量和宽度，那么它肯定很棒。

以编程方式合并多种字体？

...并非如此，除非您深深沉浸在字体设计工具和字体技术中。没有简单的方法可以合并多个字体文件以“自动”创建整洁的可变字体。