css - @font-face 和字体大小

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。