Css 如何为单个字体文件中的多个字体定义字体？

我在一个字体文件中有一个字体系列，具有多个权重和样式（常规、粗体、斜体、粗体-斜体），并希望使用@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-face

只能将它们作为单独的文件处理

通常，打开并可在web上使用的字体族将权重和样式分解为单独的文件，而不是包含在单个文件中。您可以进行搜索，以确保您的字体尚未作为单独的文件提供。我所知道的所有示例都将它们作为单独的文件。这样，不同的权重/样式可以使用不同的文件，但使用相同的

字体系列

名称，如下所示：

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

---

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

希望有帮助