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

font-size-adjust

javascript（jQuery），并检查当前字体以查看三者中哪一个有效并相应地调整字体大小。http://www.w3.org/TR/css3-fonts/#font-size-adjust（你还应该看一下 em> 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声明中按给定名称指定字体。

Answer 4

通过了解哪一个读取哪种类型的声明来定位您的浏览器。条件注释加载不同的CSS调用。然后你可以明确告诉每个人按规则做一些不同的事情。

还有typekit

Answer 5

@font-face {
    font-family: 'Tribeca';
    src: url(Tribeca.eot);
    src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
    }

MSIE将忽略它不理解format规则的最后一行。如上面的porneL指出的那样，format()应该放在src属性中。

local()将使支持浏览器使用本地字体文件，如果用户拥有它而不是从您的服务器下载（并且可能使IE也忽略该行）。

字体大小调整，如Gaby指出：CSS 3 font-size-adjust。但看起来它还没有被广泛支持。

Answer 6

要使用@ font-face使代码重复无效，您可以通过服务器端执行此操作。如果你使用例如一些urlrewrite，检测UA，如果它是IE - 返回带有.eot扩展名的文件，如果它是普通的浏览器 - ttf。

至于我，它很有效。

对于这种情况，你不应该改变你的css文件，只需要有2个文件：.ttf＆amp; .oet。

Answer 7

虽然在使用CSS时它违反了正常的良好做法，但您可以在条件CSS中使用!important声明。

例如，我们创建了两个样式表：“默认”样式表，其中包含针对Firefox特定样式的部分和Internet Explorer样式表。

然后，使用导入样式表的标准<link rel="" />方法：

<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">

<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

在'默认'样式表中，我们的Firefox样式包含在以下内容中：

@-moz-document url-prefix() {

    #my-id { font-size: 100%; }

}

这是有效的，因为@-moz-document url-prefix()部分是Firefox插件样式网页的方式。所以，其他浏览器不理解它，因此只是跳过它。

Answer 8

BODY
{
    FONT: 140% Arial;
    FONT: 195% Tribeca,TribecaIE;
}

@ font-face和font-size

8 个答案: