web-dev-qa-db-ja.com

カスタムフォントがWKWebViewで機能しないSwift

WKWebViewでカスタムフォントを使用しようとしていますが、うまくいきません。

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

HelveticaNeue-Boldを使用できますが、上記のカスタムフォントではうまく機能しません。

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

カスタムフォントを適切に追加しました。スクリーンショットを参照してください。

誰かが私にこれをどのように達成できるかを教えてください、または私を正しい方向に向けることができますか？.

enter image description here

enter image description here

enter image description here

iosswiftxcodeswift4wkwebview
9
ihy

DonMagのコメントの リンクされたスレッド で回答を読む：

  • _@font-face_の使用は必須です

  • 複数のフォントファイルを単一のフォントファミリとして使用するには、複数の_@font-face_宣言が必要です

  • url(OpenSans-Regular.ttf)のような相対URLを機能させるには、baseURLを提供する必要があります

だから、これを試してください：

_    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) //<- 
_

または、別の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：

_@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);
}
_
26
OOPer