首页 文章

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

提问于
浏览 次
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;
}

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

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

css css3 font-face

2 回答

  • 0

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

    通常，打开并可在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;
}
    回复于
  • 2

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

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

    希望有所帮助

    回复于

相关问题