@ font-face,字体变体

Question

这是我的@ font-face声明,支持不同的字体变体,在这种情况下是我的字体的粗体和粗体版本.

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bolder;
}

现在我正在使用Chrome和Firefox.在Chrome中,普通和粗体变体可以工作,但不是更大胆的变体(保持'粗体'变体).在Firefox中,只有粗体变体按预期工作,在任何其他情况下使用更大胆的变体(即使是正常的重量).
这是一个已知问题还是有更好的方法来做这个声明？

Answer 1

这里有两个独立的问题:

1. 使用font-weight关键字而不是数值.
2. 如果需要,支持IE8(及更早版本).

关键词

使用font-weight关键字的问题似乎是lighter并且bolder不是像normal和的绝对值bold(分别总是400和700),而是相对于父元素的确定的粗体(100更亮或更暗).它可能无法治疗lighter,bolder似乎它们是绝对的价值观.

正如@HTMLDeveloper和@Christoph所建议的那样,使用数值而不是关键字是解决这个问题的简单方法,并且可能本身就是一个适当的解决方案(如果不需要支持IE8).

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 900;    /* or whatever weight you need to use for "bolder" */
}

IE8及更早版本

当多个权重或样式与同一font-family名称相关联时,某些浏览器会出现显示问题.

我知道的具体问题:(可能还有其他问题)

• 当超过1个权重链接到字体系列名称时,IE8会出现显示问题.
• 当超过4个权重或样式链接到字体系列名称时,IE6/7/8会出现显示问题.

解决方案是font-family为每个字体变体使用唯一的名称:

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bold";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bolder";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}

这种方法通常由Typekit等字体服务使用.如果需要支持各种浏览器(或者至少是IE8),这可能被视为嵌入字体时必须支付的价格之一.