Cocoa WebView (MacApp) - 如何使用自定义字体？答案

【问题标题】：Cocoa WebView (MacApp) - how to use custom fonts?Cocoa WebView (MacApp) - 如何使用自定义字体？
【发布时间】：2012-08-23 17:46:45
【问题描述】：

我在 Cocoa 应用程序 (macgap) 中有一个 WebView。

（注意我不是在谈论 iOS 应用程序中的 UIWebView）

在我的 CSS 文件中，有一些自定义字体声明：

@font-face{
    font-family:'Quivira';
    src:url("./Quivira.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

但我无法加载这些内容 - 我认为这是某种安全问题。

有时，我会在控制台中看到错误“不允许加载本地资源：Quivira.ttf”（但并不总是显示）

这可能是什么原因造成的？ index.html 文件是通过 file:/// 协议加载的，因此不应该存在安全问题，因为它已经是本地的，因此应该能够加载本地资源。

我认为这可能是 webkit 中的一个错误。

有人可以在 Cocoa WebView 中加载自定义字体吗？

【问题讨论】：

标签： macos cocoa webview fonts webkit

【解决方案1】：

我尝试了两种方法来加载带有自定义字体的网页。

来自应用程序包（使用 NSBundle）
从用户指定的本地路径（使用绝对路径）

在这两种情况下，我都能成功显示自定义字体。有一个 HTML 文件，旁边是一个 .ttf 字体文件。在 HTML 文件中，我在内联 CSS 中定义了 @font-face。

在第二种情况下，您可以提供本地文件系统的任何完整路径，然后 webview 将从该路径加载（例如 /Users/johndoe/Desktop/maiwebsite/index.html）。

Code is on Github.

来自another answer on SO：

ask the bundle to give you the correct path，而不是自己获取资源路径并在其上装订子路径。
ask the bundle to give you the correct URL 根本不用处理路径。（需要 Mac OS X 10.6 或更高版本。）

如果这没有帮助，那么您能否将您的代码放在某个地方以便我们尝试调试它？

【讨论】：

谢谢，感谢您付出的努力！好的，这一定是 macgap 中的一个错误——其中的某些东西一定会导致 index.html 文件不被视为本地文件。我在这里有一个例子：github.com/asgeo1/macgap/tree/test_quivera 如果你编译那个分支，你会看到 Quivera 字体永远不会加载到 WebView 中。你可以看出这一点，因为在 WebView 中显示 unicode 'double flat' 符号 (?) 需要 Quivera 字体。我的应用需要能够显示该 unicode 符号。
让我退后一步。我可以从您的示例中看到，无论我是否使用 Quivira，双扁平符号都有效——这很棒。（在 iOS 中，让双扁平符号在 UIWebView 中工作的唯一方法是使用 Quivira，所以我必须假设 OS X 中的 WebView 有同样的问题。它没有 - 真棒）
但是我仍然有一个问题，在使用 MacGap 时由于某种原因它没有显示双扁平符号。我最初认为那是因为我无法让它加载 Quivira，但您的示例证明使用的字体不应该是问题。我只是看不出您的示例与我在上面发布的 macgap 示例的 UIWebView 工作方式有什么区别。这很奇怪。
好的，我可以看到我在上面的例子中忘记使用了，所以这就是为什么双平面不起作用。不过，这不是我的实际应用程序所面临的问题——这是另外一回事。无论如何......这现在与原来的问题无关。我真的应该弄清楚根本问题是什么，并在必要时发布另一个问题。感谢您的帮助！
很高兴它在某种程度上有所帮助。我想我会分叉 macgap。这很有趣。我想我很快就会分叉并做出贡献。 :)

【解决方案2】：

对于 WKWebView（WebView 现在已弃用），从 MacApp 包中加载自定义字体，如下所示：

[_webView loadHTMLString:htmlContent baseURL:[[NSBundle mainBundle] resourceURL]];

与 iOS 不同，需要为 bundle 资源提供所有内容是：[[NSBundle mainBundle] bundlePath]（iOS Bundle 更扁平），对于 MacApps，资源的路径更加复杂，单独使用 bundlePath 将不起作用。上述方法确实有效。

在您的 CSS 中只需像这样使用 @font-face 即可找到 resourceURL 指定位置中的任何字体。

@font-face {font-family:'myfont';src:url('myfont.ttf');}

【讨论】：