如何合并字体？

Question

如何合并字体？

cssfontstruetype

14

我有许多字体：

OpenSans-bold.ttf
OpenSans-boldItalic.ttf
OpenSans-extrabold.ttf
OpenSans-italic.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;}

任何帮助将不胜感激。

- Val

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

可能是重复的问题：如何为同一字体添加多个字体文件？ - user2284570

2个回答

5

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

- kapex

1

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

4

思考一下......我们可以将字体组合成一个特殊的fonts.css文件，与站点的其他CSS分开。这样，如果您更改（添加/删除）字体，那么只需要重新加载fonts.css。 - Kiryl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

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

但是您可以将它们用作单个字体系列，就像您只使用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;
}