如何合并字体？

Posted 2023-03-06

【中文标题】如何合并字体？

【英文标题】：How to merge fonts?

【发布时间】：2013-01-14 05:52:48

【问题描述】：

我有很多字体，

OpenSans-bold.ttf OpenSans-boldItalic.ttf OpenSans-extrabold.ttf OpenSans-italic.ttf OpenSans-light.ttf

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

例如

smallfont-family:"OpenSans"; font-weight: normal;
strongfont-family:"OpenSans"; font-weight: bold;
h2 font-family:"OpenSans"; font-weight: bolder;

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

【问题讨论】：

font-strech 在大多数浏览器中不受支持，而且这不是重复的，不知道为什么这个问题应该关闭或投票关闭。

How to add multiple font files for the Same Font? 的可能重复项

【参考方案1】：

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

但是您可以将它们用作单个字体系列，就像您使用 Arial 并对其应用斜体和粗体一样，直接或间接使用 CSS（通过 html，例如 @987654322 @ 元素默认为粗体）。为此，您需要声明字体系列。

例如，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;

【讨论】：

这是我目前的做法，但是传递给我的字体加起来是 2.8mb，这已经是很多了。因此为什么我问我是否可以设法合并字体并将它们用作普通字体而不是单独的字体。

正常使用字体的方式是每个字体都是它自己的字体文件。将它们组合到一个文件中不会节省空间，而且字体技术不是这样工作的。

@JukkaK.Korpela 将斜体或粗体属性添加到字体系列并不总是与下载单独的字体相同。例如，请查看 Google Web Fonts 中的 Roboto。仅向 Roboto-Regular 添加 900 的字体粗细不会使其与 Roboto-Black 相同。

@ChrisOdney 正确设置时是一样的，就像这个例子一样。谷歌字体在他们的链接元素字体调用中这样做：fonts.googleapis.com/css?family=Roboto:400,900 声明机器人常规和机器人黑色字体系列名称似乎是令人困惑的地方。

【参考方案2】：

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

【讨论】：

很好地使用 BASE64 不是一个好主意，因为字体永远不会被缓存......所以你什么也得不到，实际上你让事情变得更糟，因为每次你的 CSS 改变时，它都会强制用户重新下载字体。顺便说一句，该在线工具最多只能让您合并 3 个文件。

只是一个想法...我们可以将字体组合成特殊的fonts.css，它将与网站的其他CSS分开。因此，如果您更改（添加/删除）字体，则应该重新加载 fonts.css。