内联字体css文件和字体消失了

Question

我有两个用于定义字体的css文件.font-awesome.css和open-sans.css.在main.css我导入他们像这样:

@import url('../fonts/font-awesome/font-awesome.css');
@import url('../fonts/open-sans/open-sans.css');

这很好用.但是,如果我想内联这些导入,(用文件内容替换导入),(我使用r.js优化器),字体就消失了.在网络选项卡中,它们不会显示下载(即woff,eot文件).

实际上font-awesome保持原位,但只有open-sans字体消失了.

内联字体样式表是否存在问题,处理此问题的正确方法是什么.

编辑:我在github上有这个项目.r.js配置在里面gulpfile.js.您可以cssOptimize在那里看到相关选项.样式文件位于app/client/styles文件夹中.

要重现问题gulp build,请使用r.js构建项目.然后运行node config/app运行服务器并访问localhost:3000以查看页面.

尝试使用和不使用内联字体css文件.open-sans内联时你会看到字体消失了.(注释/取消注释此行以切换内联字体文件).

Answer 1

它必须在没有源代码的情况下进行调试.这似乎是由错误的路径造成的open-sans.css,网络监视器中应该有一些404.(但你说字体资源永远不会被加载,奇怪...)

更新:

得到了原因:当r.js最小化css文件时,它将删除引号,因此url("OpenSans-Bold-webfont.svg#Open Sans Web")将被压缩成url(OpenSans-Bold-webfont.svg#Open Sans Web).但是有一些白色空格,没有引号,它不会生效.

但开发人员r.js并不认为这是一个错误(请参阅此问题),因为应该转义空白区域.(我不同意,可能会r.js提供配置会更好)

有三个解决方案:

1.open-sans.css手动转义空格,只需替换url(OpenSans-Bold-webfont.svg#Open Sans Web)为url(OpenSans-Bold-webfont.svg#Open%20Sans%20Web).

2.不要最小化css文件,配置optimizeCss,none而不是使用standard.

3.将字体名称(删除其中的空格)重命名为OpenSansWeb

我更喜欢第一种方案.