css - FontFace 中字体的不同版本

Question

我用过 http://www.fontsquirrel.com/fontface/generator生成 GillSans 字体的各种版本(.svn、.eot...)。

我现在可以像这样使用它了:

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

h1 {
    font-family: "GillSansFF", Calibri, sans-serif;
}

由于 GillSans 还包括“Gill Sans Light”(粗体、斜体等)，我如何指定“Light”版本？谢谢

编辑 正如所指出的，解决方案是使用不同的字体。为了从单个 ttc 中提取 ttf，我发现了这个有效的 Python 脚本:http://pastebin.com/QXcAtP24

Answer 1

只需为您的浅色字体添加一个额外的@font-face 声明:

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

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