Google web字体在Express中无法使用

Question

我在使用express 3.0时遇到了无法加载Google webfonts字体的问题。

按照标准方式加载字体似乎不起作用：

link(href='http://fonts.googleapis.com/css?family=Crete+Round')

然而，以这些方式加载字体是有效的：

    script(type="text/javascript")
        WebFontConfig = {google: { families: [ 'Crete+Round::latin' ] }};
        (function() {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();

或者

    style
        @import url(http://fonts.googleapis.com/css?family=Crete+Round);

- jwerre

---

奇怪...这可能是Express 3的另一个新“特性”吗？我以前在Express 2中做过几次，没有问题。HTML输出是什么？你有任何奇怪的东西吗？ - 3on

如果在 link 标签中添加 rel='stylesheet' type='text/css' 属性，它是否有效？只要 Express 输出的 HTML 与您期望的一样（检查源代码），那么这就不是 Express/Jade 的问题。 - Michelle Tilley

@3on 是的，我在 Express 2 中没有遇到任何问题。 - jwerre

@BrandonTilley 我添加了rel和type，问题解决了。奇怪的是，我认为在HTML5中这些不是必需的。 - jwerre

Answer 1

我曾经遇到过类似的问题，使用Express 3.0.0rc2时没有包含CSS。我不确定这是Jade还是Express的问题，但是当我添加一个可用的style.css文件时，就可以正常工作，如下所示：

link(rel='stylesheet', href='/stylesheets/style.css')

然而，如果我删除那行代码并插入Twitter Bootstrap的CSS文件，我会得到奇怪的HTML输出。

link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')

只有我像这样做时才起作用：

link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')

为什么？我不知道。 :-) 我猜这与解析和HTML输出有关。

- EhevuTov