xcode 自定义字体在 WKWebView Swift 中不起作用

Custom Font Not Working in WKWebView Swift

提问by ihy

Trying to use custom font in WKWebView but no luck.

尝试在 WKWebView 中使用自定义字体但没有运气。

let htmlString = "<span style=\"font-family: 'OpenSans-Bold'; font-size: 30; color: white\">\(Utils.aboutUsText)</span>"
webView.loadHTMLString(htmlString, baseURL: nil)

I can use HelveticaNeue-Bold and works great but not with the custom font above.

我可以使用 HelveticaNeue-Bold 并且效果很好，但不能使用上面的自定义字体。

let htmlString = "<span style=\"font-family: 'HelveticaNeue'; font-size: 30; color: white\">\(Utils.aboutUsText)</span>"
webView.loadHTMLString(htmlString, baseURL: nil)

I have added the custom fonts properly.See screenshots.

我已正确添加自定义字体。请参阅屏幕截图。

Can someone please tell me how can i achieve this or point me in the right direction.

有人可以告诉我如何实现这一目标或为我指明正确的方向。

回答by OOPer

Reading the answers in the linked threadin DonMag's comment:

阅读DonMag 评论中链接线程中的答案：

• Using @font-faceis mandatory

• You need multiple @font-facedeclarations to use multiple font files as a single font family

• You need to provide baseURLto make relative urls like url(OpenSans-Regular.ttf)work

• 使用@font-face是强制性的

• 您需要多个@font-face声明才能将多个字体文件用作单个字体系列

• 您需要提供baseURL使相关网址像url(OpenSans-Regular.ttf)工作一样

So, try this:

所以，试试这个：

    let htmlString = """
    <style>
    @font-face
    {
        font-family: 'Open Sans';
        font-weight: normal;
        src: url(OpenSans-Regular.ttf);
    }
    @font-face
    {
        font-family: 'Open Sans';
        font-weight: bold;
        src: url(OpenSans-Bold.ttf);
    }
    @font-face
    {
        font-family: 'Open Sans';
        font-weight: 900;
        src: url(OpenSans-ExtraBold.ttf);
    }
    @font-face
    {
        font-family: 'Open Sans';
        font-weight: 200;
        src: url(OpenSans-Light.ttf);
    }
    @font-face
    {
        font-family: 'Open Sans';
        font-weight: 500;
        src: url(OpenSans-Semibold.ttf);
    }
    </style>
    <span style="font-family: 'Open Sans'; font-weight: bold; font-size: 30; color: red">(Utils.aboutUsText)</span>
    """
    webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL) //<- 

---

---

Or you can use a separate css file if you prefer:

或者，如果您愿意，也可以使用单独的 css 文件：

    let htmlString = """
    <link rel="stylesheet" type="text/css" href="open-sans.css">
    <span style="font-family: 'Open Sans'; font-weight: bold; font-size: 30; color: red">(Utils.aboutUsText)</span>
    """
    webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)

open-sans.css:

打开-sans.css：

@font-face
{
    font-family: 'Open Sans';
    font-weight: normal;
    src: url(OpenSans-Regular.ttf);
}
@font-face
{
    font-family: 'Open Sans';
    font-weight: bold;
    src: url(OpenSans-Bold.ttf);
}
@font-face
{
    font-family: 'Open Sans';
    font-weight: 900;
    src: url(OpenSans-ExtraBold.ttf);
}
@font-face
{
    font-family: 'Open Sans';
    font-weight: 200;
    src: url(OpenSans-Light.ttf);
}
@font-face
{
    font-family: 'Open Sans';
    font-weight: 500;
    src: url(OpenSans-Semibold.ttf);
}