潮SDK + less.js + SVG 字体

Question

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

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

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

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

[Error] Error finding

来自 Tide 控制台的错误，这让我相信正在找到 .svg，只是没有应用。

更新：

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

Answer 1

在研究了这个问题几个小时后，我终于弄明白了。组合使用这些框架时需要注意以下几点：

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 文件本身以确定 CSS 命名约定是否有问题SVG 文件。根据 answer 和其中的 blog post，您的 SVG 名称应该使用：

   字体系列

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

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

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

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

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