@font-face 和字体大小

Question

下面的想法是第一个 @font-face 用于 Firefox，第二个 @font-face 用于 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 规则不支持这一点。

我相信您的选择是

• 3 javascript (jQuery) 的 "nofollow noreferrer">font-size-adjust 属性
• ，并检查当前字体以查看三种字体中的哪一种有效并调整 font-size因此.. 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 声明中通过给定名称指定字体即可。

Answer 4

@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 5

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

还有打字工具包

Answer 6

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

对于我来说，效果很好。

对于这种情况，您不应该更改 css 文件，只应该有 2 个文件： .ttf 和 .ttf 。 .oet。

Answer 7

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

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

然后，使用导入样式表的标准 方法：

<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;
}