将多种字重打包到一个Web字体中

Question

将多种字重打包到一个Web字体中

cssfont-facewebfonts

9

我正在使用Font Squirrel将我的字体转换为可用的web版本。我不想将每个重量分别转换并包含在我的css中（所有这些调用都会增加大量的膨胀）。

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

试图避免伪粗体和伪斜体问题。

- Dave Rottino

伪粗体是什么样子的？只是好奇。听起来像个好问题。 - Josh Crozier

我还没有转换它们，但通常非常明显。它看起来不太好。 - Dave Rottino

@JoshC 伪粗体/斜体样式在不同的浏览器和操作系统中呈现方式不同（就像一般的Web字体一样），因此会有所不同。Windows上的Chrome经常对Web字体的伪样式呈现出明显的糟糕效果，而OSX机器上的Safari通常能更清晰地呈现它们。 - Ennui

@Ennui 很有趣。顺便说一句，回答不错，给你点赞了。 - Josh Crozier

@JoshC 谢谢！"faux bold" 这个东西真的让我很烦恼，当我刚开始学习使用网络字体时，我曾经深入研究过如何避免再次看到那种丑陋的东西 :D - Ennui

2个回答

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-weight和font-style属性可以减少调用。只需声明一次font-family。

- disinfor

没错！我也用自己的例子更新了我的内容。你知道声明顺序是否重要吗（例如：常规、粗体、斜体、粗斜体）？我听说过这很重要，但是我还没有找到任何权威来源来证实这一点。 - Ennui

1

@Ennui 我听到你所说的关于顺序的事情。我自己没有进行任何测试（如果它没有出问题的话 :) 噢，我给了你的答案点赞。 - disinfor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ennui · Accepted Answer

在您的@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-face 声明中使用 font-weight 和 font-style 属性，因此更具向后兼容性的方法是为每个字重和样式命名不同的字体（例如 CartoGothicRegular、CartoGothicBold、CartoGothicItalic、CartoGothicBoldItalic 等）。

另外，FontSquirrel 实际上可以为您完成这项工作——如果您在 Webfont 生成器中单击 Expert 设置，在“CSS”下有一个名为 Style Link 的选项，将以此格式输出它们。