@font-face和font-size

Question

下面的想法是第一个@font-face是Firefox的，第二个是IE的，Arial是不能理解前两个的。除了我想在Arial的情况下给出一个不同的大小，并且还没有弄清楚这样做的语法之外，它都是有效的。

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf"); format("truetype");
}

@font-face {
  font-family: TribecaIE;
  src: url("Tribec0.eot");
}

BODY
{
    FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}

Answer 1

我不相信仅仅使用css就可以做到这一点；我们可能需要使用javascript。

如果Arial是活动字体，我们要做的就是指定一个不同的字体大小。检测活动字体并不是很简单，但这里有一种方法可以满足我们的特定目的。我们可以创建一个包含一些Arial字符的临时元素并测量它的宽度，然后创建第二个包含字符的元素，而不指定字体(这样它就默认使用“活动”字体)并比较宽度。这不会告诉我们哪个字体当前是活动的，但可以指出其中一个嵌入的字体是否加载了@ font -face，因为它们肯定不会具有与Arial相同的宽度。如果两个元素的宽度不相等，我们就知道Arial不能加载，所以我们只会在宽度相等的情况下调整字体大小。

即使浏览器无法加载Arial字体，我们的测试仍然有效，因为当我们在测试期间指定Arial时，浏览器将默认使用与第二个元素相同的字体。如果浏览器无法使用@font-face加载嵌入字体，则这两个元素仍然具有相同的宽度。

如果有人想要我用代码进一步说明，我很乐意编写javascript。

Answer 2

正常CSS规则不支持这一点。

我相信你的选择是

• css 3
• javascript (jQuery)的font-size-adjust属性，检查当前字体，看看三种字体中哪一种有效，并相应地调整字体大小。http://www.w3.org/TR/css3-fonts/#font-size-adjust (您还应该看看http://www.modernizr.com/ )

Answer 3

我相信它是这样的(接近于你所拥有的)：

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf");
}

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.eot");
}

body {
    font-family: Tribeca, Arial;
}

IE不会知道如何打开ttf，所以它不会麻烦。然后它将打开eot。然后，您只需在body声明中根据给定的名称指定字体。