css @字体外观和字体大小

zqry0prt  于 2023-03-09  发布在  其他
关注(0)|答案(8)|浏览(192)

下面的想法是第一个@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%;
}
bpzcxfmw

bpzcxfmw1#

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

mctunoxg

mctunoxg2#

普通CSS规则不支持此操作。
我相信你的选择是

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

ecfsfe2w3#

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

@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声明中指定字体的给定名称。

yb3bgrhw

yb3bgrhw4#

通过了解哪个浏览器读取哪种类型的声明来定位你的浏览器。条件注解加载不同的CSS调用。然后你可以明确地告诉每个浏览器根据规则做不同的事情。
还有打字机

5us2dqdw

5us2dqdw5#

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

qcbq4gxm

qcbq4gxm6#

要用@font-face来避免代码重复,你可以在服务器端这样做。如果你使用一些urlrewrite,检测UA,如果是IE -返回扩展名为.eot的文件,如果是普通浏览器- ttf。
对我来说,效果很好。
对于这种情况,你不应该改变你的css文件,只是应该有2个文件:.ttf和. oet

cnwbcb6i

cnwbcb6i7#

尽管这违反了使用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插件设计网页的方式,所以其他浏览器不理解它,所以直接跳过它。

xzv2uavs

xzv2uavs8#

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

相关问题