Question

是否可以在不同的浏览器中呈现不同的font-family？例如，我想使用font-family: 'A'在Chrome中呈现，font-family: 'B'在Firefox中呈现。

Answer 1

将字体类保存在单独的CSS文件中，并将它们与以下JS代码链接：

if (BrowserDetect.browser.indexOf("chrome")>-1) {

   document.write('<'+'link rel="stylesheet" 
   href="../component/chromeCSSStyles.css" />');

} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {

   document.write('<'+'link rel="stylesheet" 
   href="../component/mozillaStyles.css" />');

} else if (BrowserDetect.browser.indexOf("explorer")>-1) {

   document.write('<'+'link rel="stylesheet" 
   href="../component/explorerStyles.css" />');

}

Answer 2

您实际上可以在不同的浏览器上应用特定的CSS属性：

// this targets Mozilla
@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

// this targets Chrome, Safari AND Edge
@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: green;
  }
}

// this targets IE
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  h1 {
    color: orange;
  }
}

以下HTML h1标记在Chrome上为绿色，在Mozilla上为红色。

<h1>Look at my color!</h1>

CSS - 在不同的浏览器中渲染不同的字体[css解决方案]

2 个答案: