这是我的@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 中只有粗体变体按预期工作,在任何其他情况下都会使用更粗体的变体(即使是正常重量)。
这是一个已知问题还是有更好的方法来进行此声明?
最佳答案
这里有两个独立的问题:
- 使用字体粗细关键字而不是数值。
- 如果需要,支持 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),这可以被认为是嵌入字体时必须付出的代价之一。
关于css - @font-face,字体变体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15342704/