如何在单个字体文件中为多个字体定义字体？答案

【问题标题】：How to define font-face for multiple typefaces inside a single font file?如何在单个字体文件中为多个字体定义字体？
【发布时间】：2012-10-26 10:24:33
【问题描述】：

我在单个字体文件中有一个字体系列，具有多种粗细和样式（Regular、Bold、Italic、Bold Italic），我想使用@font-face 标签定义字体。我该怎么做？

如果我这样做：

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

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

...它以常规字体显示Regular和Bold。

如果我为 h1、h2、h3 等设置 font-weight: bold ，它会将这些元素显示为电子粗体。如何从一个字体文件中提取多种字体？

【问题讨论】：

标签： css font-face

【解决方案1】：

如果您确实将所有权重和样式嵌入到 single 字体文件中，那么我相信您唯一的解决方案是将这些定义分成多个文件（不确定会涉及什么在那），据我所知@font-face 只能将它们作为单独的文件处理。

通常，在网络上开放并可用的字体系列会将粗细和样式分解为单独的文件，而不包含在一个单个文件中。您可能会搜索以确保您的字体尚未作为单独的文件提供。我知道的所有示例始终将它们作为单独的文件。这样，不同的文件可以用于不同的权重/样式，但使用相同的 font-family 名称，如下所示：

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

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

@font-face {
    font-family: 'myFont';
    src: url('font-ITALIC.eot');
    src: url('font-ITALIC.eot?#iefix') format('embedded-opentype'),
       url('font-ITALIC.woff') format('woff'),
       url('font-ITALIC.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'myFont';
    src: url('font-BOLDITALIC.eot');
    src: url('font-BOLDITALIC.eot?#iefix') format('embedded-opentype'),
        url('font-BOLDITALIC.woff') format('woff'),
        url('font-BOLDITALIC.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

【讨论】：

【解决方案2】：

使用这个简单的工具，您可以将单个字体文件拆分为多个文件。适用于 Mac 和 Windows。

http://peter.upfold.org.uk/projects/dfontsplitter

希望有帮助

【讨论】：