0

我刚开始尝试使用 TideSDK 将网站部署到 .exe 和 .app,这在很大程度上非常棒。

我目前遇到的问题是我所有的 CSS 样式都是使用 less.js 框架以 .less 样式编写的。在这里,我声明了自定义字体,当部署到标准 Web 浏览器时,它们适用于所有使用它们的元素。

当通过 Tide 部署时,除非我将所有样式从 .less 样式表中取出并将它们放回常规 .CSS 文件中,否则它似乎不会坚持下去,这让我相信 Tide 存在某种编译时更改在部署应用程序的实际视图时在内部使用。

我不知道如何解决这个问题。作为一个说明,我没有得到任何

[Error] Error finding

来自潮汐控制台的错误,这让我相信.svg 正在被发现,只是没有应用。

更新:

看来我在 src: url('...') 中使用了错误的语法,所以 .less 文件中的 CSS 实际上是默默地失败了。我现在收到一个非常奇怪的 [Error] Error Finding... .svg 文件。这行 CSS 中的 URL 由 app: 3 次添加。

4

1 回答 1

2

经过几个小时的研究,我终于弄明白了。使用这些框架的组合时需要注意以下几点:

  1. less.js 在使用时会吐出非常奇怪的路径目录

    src: url('...');

    作为解决方案,您可以使用 less 中可用的 import 指令,并将 @font-face 声明放在该 .css 样式表中。通过导入一个普通的 .css 样式表,您告诉 less.js 将其视为常规 .css,并且不会发生吐出的混合 url。

    @import "../css/style.css";

  2. 在放置导入指令并确认 SVG 确实是在 Chrome 检查器中的 Resources - Fonts 下生成后,我继续查看 SVG 文件本身以确定 SVG 文件的 CSS 命名约定是否有问题. 根据这个答案,以及其中的博客文章,您的 SVG 名称应该使用:

    字体系列

来自 SVG 元数据的命名方案中的值

src: url('YourSVGFont.svg#Silkscreen') format('svg');

实际上,您应该使用字体ID,至少在我的情况下这是解决方案:

src: url('YourSVGFont.svg#slkscrb') format('svg');

这是嵌入在博客文章中的图像,以便您可以看到我在说什么,并查看这两个名称在 SVG 元数据中的位置。

于 2013-04-12T16:45:35.207 回答