2

我在单个字体文件中有一个字体系列，具有多种粗细和样式（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 ，它会将这些元素显示为电子粗体。如何从单个字体文件中提取多个字体？

4

2 回答 2

2

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

通常，在 Web 上开放并可用的字体系列会将粗细和样式分成单独的文件，而不是包含在一个文件中。您可能会搜索以确保您的字体尚未作为单独的文件提供。我知道的所有示例始终将它们作为单独的文件。这样，不同的文件可以用于各种权重/样式，但使用相同的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;
}
于 2012-11-06T17:37:23.770 回答
0

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

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

希望有帮助

于 2015-02-24T13:54:22.547 回答