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

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

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

试图避免这里的人造大胆和虚假斜体.

解决方法

在@ font-face调用中相应地设置font-weight和font-style属性(而不是FontSquirrel的默认输出,其中所有这些属性都设置为normal,而且每个weight / style都有不同的名称),并将它们全部命名为相同的字体.

这是我去年建立的网站的一个例子：

@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-face声明中的font-weight和font-style属性,因此它使用起来更加向后兼容您为每个权重和样式命名不同字体的方法(CartoGothicRegular,CartoGothicBold,CartoGothicItalic,CartoGothicBoldItalic等).

此外,FontSquirrel实际上可以为您执行此操作 – 如果您单击Webfont Generator中的专家设置,在“CSS”下有一个名为Style Link的选项,它将以此格式输出它们.

原文地址：https://www.jb51.cc/css/215362.html