Question

我猜火狐是唯一不支持字体“Arial Narrow”的浏览器。其他浏览器不支持“font-stretch”属性。如何使用CSS定位特定浏览器？我这样做了：

@-moz-document url-prefix() {
    h2 {
  font-family:"Arial";
  font-stretch: condensed;
    }
    .header_p {
  font-family: "Arial";
  font-stretch: condensed;
}

}
h2{
 font-family:"Arial Narrow";
 font-size: 22px;
 letter-spacing: 0px;
}

.header_p {
 font-family: "Arial Narrow";
}

它不起作用，我不知道为什么......

如果我交换订单以便@ -moz部分为秒，则chrome停止工作。我想它正试图应用@ -moz规则

IE根本没有阅读CSS

Answer 1

从错过的H Open Magazine：

CSS3包括a font module，它提供 @ font-face 声明，允许Web开发人员加载字体以确保其网站显示正确的字体。 WOFF是这些字体的数据格式。

专门为网络设计的文件格式，它是一个容器，除了sfnt格式的（可选压缩的）字体表之外，还可以包含元数据，例如许可或其他信息。

Browser support几近普及。

这是an example of how to use them。

这有帮助吗？

Answer 2

我不确定firefox是否支持该字体系列，但你可以使用

仅定位 firefox

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

查看完整文档 here

您可以将 IE 定位为

<!--[if IE]>
  // Your css for IE or   
  // Perhaps importing a specific style sheet as
  <link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->

仅限目标 chrome

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 div{
      color: red;
    } 
}

Answer 3

您可以尝试以下代码段。

  h2 {
        font-family: "Arial Narrow";
        font-size: 22px;
        letter-spacing: 0px;
    }

    .header_p {
        font-family: "Arial Narrow";
    }

    h2, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;
    }

    .header_p, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;
    }

使用css定位特定浏览器

3 个答案: