Chrome 的CSS字体系列问题

Question

这个CSS定义:

* {font-family: 'Lucida console', monospace;}

被 firefox 正确解释。

使用 ubuntu-chromium (v18.0.1025..)，为了获得相同的字体，我写了

* {font-family: monospace 'Lucida console';}(是的，没有逗号)

你可以试试这个live example使用两种浏览器(链接内嵌入代码)。

如何使“monospace lucida console”对两者都可用？谢谢。

Answer 1

我找到了答案的开头。

Firefox (22.0) 控制台讨论:

[13:03:08,615] downloadable font: download failed 
  (font-family: "lucida_consoleregular" [...])
  bad URI or cross-site access not allowed
  source: http://www.goto.com/font/lucida_console-webfont.ttf 
  @ http://www.goto.com/css/style.css
  source: [...] lucida_console-webfont.woff
[13:03:08,615] downloadable font: no supported format found 

针对该网站的 DNS 是从两个 URL 重定向而来的:一个以“w3”为前缀。另一个是“www”。字体路径是样式表是相对路径，但是服务器根URI是唯一的，不管是www还是w3

@font-face {
    font-family: 'lucida_consoleregular';
    src: url('../fonts/lucida_console-webfont.eot');
    src: url('../fonts/lucida_console-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lucida_console-webfont.woff') format('woff'),
         url('../fonts/lucida_console-webfont.ttf') format('truetype');
}

调用与正确的根 URI 相关的正确前缀时不会发生错误

另一方面，Ubuntu-Chromium(现在是 28.0)和 Opera(12.16)没有问题。