将多个权重打包成一个Web字体

Question

我正在使用Font Squirrel将我的字体转换为可用的Web版本.我不想单独转换每个重量并将它们包含在我的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的选项,它将以此格式输出它们.