谷歌网络字体在 Express 中不起作用答案

【问题标题】：Google web fonts not working in Express谷歌网络字体在 Express 中不起作用
【发布时间】：2012-08-15 15:17:50
【问题描述】：

我无法让 Google 网络字体在 express 3.0 中工作。

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

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);

【问题讨论】：

奇怪...这可能是 express 3 的另一个新“功能”吗？我在 express 2 中做过几次没有问题。什么是 html 输出？你有什么奇怪的事情吗？
将rel='stylesheet' type='text/css'属性添加到link标签是否有效？只要 Express 输出您期望的 HTML（检查源代码），就不是 Express/Jade 问题。
@3on 是的，我在 express 2 中没有任何问题
@BrandonTilley 我添加了 rel 和 type 并解决了问题。奇怪，我认为这些在 HTML5 中是不必要的。

标签： node.js express google-webfonts

【解决方案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 输出有关。

【讨论】：