Question

我目前正在开发一个Symfony 2网络应用程序，但是当我从Google字体导入字体时，我遇到了Assetic（我认为）的问题......

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

这是我的资产配置（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

为了在不必一直安装资产的情况下工作，我在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并且一切正常，没有警告，没有错误，我的更改已加载......但字体未加载！当我检查源代码时，资产文件在这里，它包含我需要的@import行...但是没有加载字体，并且在Chrome开发工具的“网络”选项卡中，没有请求发送给Google以检索字体。

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

Answer 1

@import规则必须在所有其他规则之前（@charset规则除外）。

由于Assetic将块中的所有CSS文件合并到一个文件中，因此@import规则前面会出现@bootstrap_css中的所有规则。

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

Answer 2

我只是在HTML头中添加了link标记，但更喜欢@import方法

Symfony 2＆amp;资产 - 从谷歌字体api导入字体

2 个答案: