Question

我在单个字体文件中有一个字体系列，其中包含多重权重＆amp;样式（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;
}

...它以常规字体显示常规和粗体。

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

Answer 1

如果确实将所有权重和样式嵌入到单字体文件中，那么我相信您唯一的解决方案是将这些定义分成多个文件（不确定所有内容都将涉及到在那个），至于我的知识@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;
}

Answer 2

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

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

希望有所帮助

如何在单个字体文件中为多个字体定义font-face？

2 个答案: