css - Symfony 2 和 Assetic - 从 google font api 导入字体

Question

我目前正在开发 Symfony 2 Web 应用程序，但当我从 Google 字体导入字体时，我遇到了 Assetic 问题(我认为)...

当我在本地使用 dev env 时，我看到发送到 Google 来检索字体的请求，但是当我使用 prod env 在线发布我的作品时，没有发送任何请求，当然字体也没有正确加载。 .

这是我的 Assets 配置(config.yml):

assetic:
debug:          "%kernel.debug%"
use_controller: false
bundles:        ['MyBundle']
filters:
    cssrewrite: ~
assets:
    bootstrap_js:
        inputs:
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/js/bootstrap.js
    bootstrap_css:
        inputs:
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap.css
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap-theme.css
        filters: [cssrewrite]
    bootstrap_glyphicons_ttf:
        inputs:
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
        output: "fonts/glyphicons-halflings-regular.ttf"
    bootstrap_glyphicons_eot:
        inputs:
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
        output: "fonts/glyphicons-halflings-regular.eot"
    bootstrap_glyphicons_svg:
        inputs:
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
        output: "fonts/glyphicons-halflings-regular.svg"
    bootstrap_glyphicons_woff:
        inputs:
            - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
        output: "fonts/glyphicons-halflings-regular.woff"
    jquery:
        inputs:
            - %kernel.root_dir%/../vendor/components/jquery/jquery.js
            - %kernel.root_dir%/../web/js/jquery.mmenu.min.js
            - %kernel.root_dir%/../web/js/jquery-ui.min.js
    public_js:
        inputs:
            - %kernel.root_dir%/../web/js/momentjs.min.js
            - %kernel.root_dir%/../web/js/fullcalendar2.min.js
            - %kernel.root_dir%/../web/js/owl-carousel/owl.carousel.min.js
            - %kernel.root_dir%/../web/js/menu.js
    style_css:
        inputs:
            - %kernel.root_dir%/../web/css/style.css
            - %kernel.root_dir%/../web/css/jquery.mmenu.css
            - %kernel.root_dir%/../web/css/jquery.mmenu.positioning.css
            - %kernel.root_dir%/../web/js/owl-carousel/owl.carousel.css
            - %kernel.root_dir%/../web/js/owl-carousel/owl.theme.css
    homepage_css:
        inputs:
            - %kernel.root_dir%/../web/css/homepage.css
    shop_css:
        inputs:
            - %kernel.root_dir%/../web/css/shop.css
    championship_css:
        inputs:
            - %kernel.root_dir%/../web/css/championship.css
    admin_css:
        inputs:
            - %kernel.root_dir%/../web/css/admin.css
    admin_js:
        inputs:
            - %kernel.root_dir%/../web/js/admin.js
    paypal_js:
        inputs:
            - %kernel.root_dir%/../web/js/paypal-button.min.js

为了无需一直安装 Assets 即可工作，我在 config_dev.yml 中添加了:

assetic:
    use_controller: true

在 style.css 中，我使用以下命令导入字体: @import url(http://fonts.googleapis.com/css?family=Exo:300,400,500,700,400italic,500italic,700italic,300italic);

在我的 TWIG 模板的标题中(例如商店页面):

{% stylesheets '@bootstrap_css' '@style_css' '@shop_css'%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
{% endstylesheets %}

当我把我的工作放到网上时，我运行 php app/console assetic:dump 并且一切正常，没有警告，没有错误，我的更改已加载......但字体不已加载!当我检查源代码时， Assets 文件在这里，它包含我需要的 @import 行...但是字体未加载，并且在 Chrome 开发工具的“网络”选项卡中，没有发送到 Google 来检索该字体的请求字体。

如果我找不到解决方案，我会将字体放入我的文件中，但我更喜欢 @import 方法! 我看不出出了什么问题，我被卡住了，请帮忙，谢谢!

Answer 1

@import rules must precede all other rules (except the @charset rule, if present).

由于 Assetic 会将 block 中的所有 CSS 文件合并到一个文件中，因此您的 @import 规则将位于 @bootstrap_css 中的所有规则之前。

只需将您的 @import 规则移动到另一个文件并将其放在样式表 block 中的第一个位置。