将多个重量包装到一个网络字体中 [英] Packaging multiple weights into one web font

问题描述

我使用Font Squirrel将我的字体转换为可用的网络版本。我想不必分别转换每个重量，并将它们包括在我的css（将添加许多膨胀与所有这些电话）。

I'm using Font Squirrel to convert my fonts into useable web versions. I'd like to not have to convert each weight separately and include them in my css (would add alot of bloat with all those calls).

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

Is there a way to package multiple weights into one font and use the font-weight property to properly call the correct characters?

尝试避免这里的粗体和虚假斜体。 p>

Trying to avoid the faux-bold and faux-italics here.

推荐答案

设置 font-weight 和 @ font-face 调用（而不是FontSquirrel的默认输出，其中所有的设置为正常，并且它们为每个重量/样式具有单独的名称），并为它们命名所有相同的字体。

Set the font-weight and font-style properties accordingly in your @font-face calls (instead of FontSquirrel's default output where all of them are set to normal and they have separate names for each weight/style instead), and name them all the same font.

以下是我去年建立的网站的示例：

Here's an example from a site I built last year:

@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不会以这种方式自动生成代码，是某些旧版的浏览器/用户代理不支持<$ c中的 font-weight 和 font-style $ c> @ font-face 声明，所以它更向后兼容使用方法，你为每个权重和样式不同地命名字体（CartoGothicRegular，CartoGothicBold，CartoGothicItalic，CartoGothicBoldItalic等）。

Note that FontSquirrel doesn't automatically generate code this way for a reason - which is that some older browsers / user agents do not support font-weight and font-style properties inside of @font-face declarations, so it's more backwards compatible to use the method where you name the fonts differently for each weight and style (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic and so forth).

此外，FontSquirrel实际上可以为您做到这一点 - 如果您在Webfont生成器中的专家设置，CSS下有一个选项，将以此格式输出。

Also, FontSquirrel actually can do this for you - if you click Expert settings in the Webfont Generator, there is an option under "CSS" called Style Link which will output them in this format.

这篇关于将多个重量包装到一个网络字体中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！