13

我有很多字体，

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

任何帮助都将不胜感激。

4

2 回答 2

11

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

但是您可以将它们用作单个字体系列，就像您使用 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;
}
于 2013-01-30T15:34:21.513 回答
4

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

于 2013-01-30T12:18:12.467 回答