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

Question

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

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

试图避免这里的人造粗体和人造斜体。

Answer 1

在您的调用中相应地设置font-weight和font-style属性@font-face（而不是 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的选项，它将以这种格式输出它们。

Answer 2

这是支持 Ennui 的答案：

@font-face {
    font-family: 'Your Font';
    src: url('fonts/SF Your Font.eot');
    src: local('☺'), url('fonts/SF Your Font.woff') format('woff'), url('fonts/SF Your Font.ttf') format('truetype'), url('fonts/SF Your Font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {    
    font-family: 'Your Font';
    src: url('fonts/SF Your Font Bold.eot');
    src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {    
    font-family: 'Your Font';
    src: url('fonts/SF Your Font Italic.eot');
    src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {    
    font-family: 'Your Font';
    src: url('fonts/SF Your Font Bold Italic.eot');
    src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg');
    font-weight: bold;
    font-style: italic;
}

确实没有办法创建单独的字体，但是使用font-weightandfont-style属性，您将减少调用。您只需声明font-family一次。