javascript - JS UWP 中的自定义字体

Question

如何将自定义字体添加到使用 JavaScript 的通用 Windows 应用程序？

我将字体放在一个新文件夹/fonts/中，我使用 CSS @font-face 添加字体

@font-face {
    font-family: "Montserrat";
    src: url("../font/Montserrat-Regular.ttf");
}

但是当我编译应用程序时，它给出了错误:

The app couldn’t resolve ms-appx://817ec616-2c4f-44b6-aa98-2108aca6a18a/lib/fonts/Montserrat-Regular.ttf because of this error: DATA_NOT_AVAILABLE.

和 @font-face 跨域请求失败。资源访问受到限制。

此错误是由于 Visual Studio 中的某些原因造成的吗？

Answer 1

如果您引用的是托管在网络上而不是应用程序包中的 CSS 文件，则可能会出现这种情况。这可以解释跨源问题。如果是这种情况，请指定 URI 的绝对路径。或者，更好的是，将 ttf 文件包含在包中。

当包含在包中时，自定义字体对我来说效果很好。

如果不是，请尝试不同的文件，以检查是否是特定文件的问题。