css - 将多个权重打包到一个网络字体中

Question

我正在使用 Font Squirrel 将我的字体转换为可用的网络版本。我不想单独转换每个重量并将它们包含在我的 css 中(所有这些调用会增加很多膨胀)。

有没有办法将多个粗细打包成一个字体，并使用font-weight属性正确调用正确的字符？

尽量避免这里的仿粗体和仿斜体。

Answer 1

在你的 @font-face 调用中相应地设置 font-weight 和 font-style 属性(而不是 FontSquirrel 的默认输出，所有它们中的一部分被设置为 normal 并且它们为每个重量/样式都有单独的名称)，并将它们命名为相同的字体。

这是我去年建立的网站的示例:

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot');
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot');
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot');
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'CartoGothic';
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot');
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
         url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
         url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

请注意，FontSquirrel 不会以这种方式自动生成代码是有原因的 - 这是一些较旧的浏览器/用户代理不支持 font-weight 和 font-style @font-face 声明中的属性，因此使用为每种粗细和样式(CartoGothicRegular、CartoGothicBold、CartoGothicItalic、CartoGothicBoldItalic 等)命名不同字体的方法更加向后兼容。

此外，FontSquirrel 实际上可以为您完成此操作 - 如果您单击 Webfont Generator 中的专家设置，“CSS”下有一个名为 Style Link 的选项，它将以这种格式输出它们。