代码之家 › 专栏 › 技术社区 › Mark

@字体和字体大小

fonts css

Mark · 技术社区 · 16 年前

下面的想法是第一个@font face用于Firefox,第二个用于IE,还有一个用于任何其他无法理解前两个的东西。这一切工作,除了我想给一个不同的大小,在情况下的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%;
}

8 回复 | 直到 16 年前

defines 16 年前

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

如果活动字体是Arial,我们只需要指定不同的字体大小。检测活动字体并不简单,但这里有一个方法可以用于我们的特定目的。我们可以创建一个包含一些Arial字符的临时元素并测量其宽度,然后创建一个包含字符的第二个元素而不指定字体(这样它默认为“active”字体)并比较宽度。这不会告诉我们哪个字体当前处于活动状态,但可以指示其中一个嵌入字体是否加载了@font face,因为它们的宽度肯定不会与Arial相同。如果两个元素的宽度不相等,我们知道Arial不可能加载,因此我们将只在宽度相等时调整字体大小。

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

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

Gabriele Petrioli 15 年前

正常的CSS规则不支持此操作。。

我相信你的选择是

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

geowa4 16 年前

我相信是这样的(接近你所拥有的):

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

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

body {
    font-family: Tribeca, Arial;
}

我不知道怎么打开 ttf ,这样就不麻烦了。然后它会打开 eot . 然后,您只需在 body 宣言。

Lorenzo816 16 年前

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

还有打字机

widyakumara 16 年前

@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指出字体大小的调整。但看起来还没有得到广泛支持。

Alex Ivasyuv 16 年前

为了避免使用@font face进行代码复制,可以通过服务器端执行此操作。例如,如果您使用一些urlrewrite,检测UA,如果它是扩展名为.eot的IE-return文件,如果它是普通浏览器-ttf。

对我来说,效果很好。

对于这种情况,您不应该更改css文件,而应该有2个文件:.ttf&.oet。

nchpmn 15 年前

尽管在使用CSS时违反了常规的良好实践,但是您可以使用 !important 在条件CSS中声明。

例如,我们创建了两个样式表:“默认”样式表,其中有一个用于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() 部分是如何火狐插件风格的网页。所以,其他浏览器不理解它,所以就跳过它。

-1

Mark 16 年前

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