将自定义字体添加到WKWebView不起作用

时间:2019-08-20 22:49:20

标签: html ios css swift wkwebview

我试图在WKWebView中使用自定义字体,但是它不起作用。

htmlString = """
<head>
<style type=\"text/css\">
@font-face
{
font-family: 'Aljazeera';
font-weight: normal;
src: url(Al-Jazeera-Arabic-Regular.ttf);
}
body{
font-family: 'Aljazeera';
text-align:right;
}
</style>
</head>
<body>\(textFile)</body></html>
""";

webView.loadHTMLString(htmlString, baseURL: nil)

text-align:right;工作正常,所以我知道它正在读取CSS。 该字体可与UILabels和UIButtons配合使用,因此该应用程序可以正常阅读。

1 个答案:

答案 0 :(得分:0)

确保所有字体文件都添加到Info.plist以及项目目标中。 FontFile.css文件实现字体家族和文件的来源。

FontFile.css文件包括:

@font-face
{
    font-family: 'MonotypeSabonW04-Regular';
    src: local('MonotypeSabonW04-Regular'),url('Monotype Sabon Regular.otf') format('opentype');
}
@font-face
{
    font-family: 'MonotypeSabonW04-Italic';
    src: local('MonotypeSabonW04-Italic'),url('Monotype Sabon Italic.otf') format('opentype');
}

@font-face
{
    font-family: 'CharlotteSansW02-Book';
    src: local('CharlotteSansW02-Book'),url('Charlotte Sans Book.otf') format('opentype');
}


h1
{
    font-family: 'MonotypeSabonW04-Regular';
    font-size: 70px;
    font-weight: normal;
}

h2
{
    font-family: 'MonotypeSabonW04-Italic';
    font-size: 65px;
    font-weight: normal;
}

h3
{
    font-family: 'CharlotteSansW02-Book';
    font-size: 60px;
    font-weight: normal;
}

ViewController.swift文件->设置WKWebview后,在viewDidLoad中调用以下功能:

func loadHtmlStringToWKWebView() {
    let strCssHead = """
        <head>\
        <link rel="stylesheet" type="text/css" href="iPhone.css">\
        </head>
        """
    let strBody = """
        <body>\
        <h1>Header Font 1</h1>\
        <h2>Header Font 2</h2>\
        <h3>Header Font 3</h3>\
        </body>
        """

    wkWebView?.loadHTMLString("\(strCssHead)\(strBody)", baseURL: URL(fileURLWithPath: Bundle.main.path(forResource: "FontFile", ofType: "css") ?? ""))
}