2

我有一个自定义字体导入到 CSS 中@font-face，效果很好。在尝试使用 Mark Story 的AssetCompress插件时，我在文件中包含了 CSS.ini文件。虽然字体有效（目前，但它可能已被缓存），但我收到错误消息。

CSS文件的片段（font目录在css目录中）：

...
@font-face {
    font-family: 'ArvoRegular';
    src: url('font/arvo-regular-webfont.eot');
    src: url('font/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/arvo-regular-webfont.woff') format('woff'),
         url('font/arvo-regular-webfont.ttf') format('truetype'),
         url('font/arvo-regular-webfont.svg#ArvoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
...

控制台错误（Chrome）：

GET http://localhost/.../cache_css/font/arvo-bold-webfont.woff 404 (Not Found)

为什么会发生此错误以及如何摆脱它？此外，当我在浏览器中访问该 URL 时，我得到了一个 CakePHP NotFoundException，这就是我认为该字体现在可以从缓存中工作的原因。

编辑

完整（真实）路径是：http://localhost/_active/website-under-development/css/font/arvo-regular-webfont.eot主页位于http://localhost/_active/website-under-development/

webroot的目录结构是：

/webroot/
   |--css/
   |----font/
   |------arvo-regular-webfont.eot
   |------other font files...
   |----main.css
   |----other CSS files...
4

2 回答 2

1

使 url 相对于 webroot

资产压缩插件的默认配置具有与源文件夹相同级别的缓存文件夹：

[General]
cacheConfig = false

[js]
cachePath = WEBROOT/cache_js/

[css]
cachePath = WEBROOT/cache_css/

因此文件夹结构如下：

app
    webroot
        cache_css
        cache_js
        css
        js
        img

而不是定义相对于文件位置的 url - 相对于 webroot 定义它们：

/* /css/some.css */
@font-face {
    font-family: 'ArvoRegular';
    src: url('../css/font/arvo-regular-webfont.eot');

/* /css/some/other.css */
@font-face {
    font-family: 'ArvoRegular';
    src: url('../../css/font/arvo-regular-webfont.eot');

这允许在 css 文件中找到字体文件/图像，但可以访问它们。即以下所有 css 文件都会找到正确的字体文件：

http://localhost/myproject/css/some.css
http://localhost/myproject/css_cache/123123.css
http://localhost/myclient/myproject/css/some.css
http://localhost/myclient/myproject/css_cache/123123.css
http://myproject.dev/css/some.css
http://myproject.dev/css_cache/123123.css
http://cdn.myproject.com/version123/css_cache/123123.css
于 2013-07-20T21:15:30.670 回答
0

您需要小心相对链接的资产。如果它的图像或字体。将这些文件压缩并存储在不同位置（在您的情况下为“cache_css”文件夹）后，路径将不匹配。

因此，请始终将您的资产相对于根（而不是当前文件）链接以避免这种情况。从根目录（因为http://www.domain.de/它是/域之后的部分），它将始终可以使用相同的 url 访问，因此无论最终压缩的 css 位于何处，都始终可以访问。

// if the file is in WEBROOT/css/font/
url('/css/font/arvo-regular-webfont.svg#ArvoRegular')

PS：并尽量避免那些本地主机设置。使用虚拟主机和本地 url，如“my.website.local”等。

于 2013-07-20T00:31:03.930 回答