下面的想法是第一个@ 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%;
}
解决方法
我不相信这是可能的css单独;我们可能需要使用javascript.
如果Arial是活动字体,我们要做的就是指定不同的字体大小.检测活动字体不是很简单,但这里是一种可以为我们特定目的工作的方法.我们可以创建一个包含一些Arial字符并测量其宽度的临时元素,然后创建一个包含字符而不指定字体的第二个元素(因此默认为“活动”字体)并比较宽度.这不会告诉我们哪个字体当前处于活动状态,但可以指示其中一个嵌入字体是否加载了@ font-face,因为它们的宽度肯定不会和Arial的宽度相同.如果两个元素的宽度不相等,我们知道Arial无法加载,因此如果宽度相等,我们将只调整字体大小.
即使浏览器无法加载Arial字体,我们的测试仍然有效,因为当我们在测试期间指定Arial时,浏览器将默认为与第二个元素相同的字体.如果浏览器无法使用@ font-face加载嵌入的字体,两个元素仍然具有相等的宽度.
如果有人想让我进一步说明代码,我会很乐意写这个javascript.
