css - 如何合并字体？

Question

我有很多字体，

• 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;}

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

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;
}