在UIWebView中使用自定义字体

时间:2012-05-07 23:52:15

标签: ios uiwebview fonts true-type-fonts

我想在UIWebView中显示自定义字体。我已经将字体放在“应用程序提供的字体”下的plist中。正在使用的代码:

        UIWebView *webView = [[UIWebView alloc] initWithFrame:myRect];
        NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
        [webView loadHTMLString:html baseURL:baseURL];
        [self addSubview:webView];

其中html是一个NSString,其中包含以下内容:

<html><head>
<style type="text/css">
@font-face {
    font-family: gotham_symbol;
    src: local('GOTHAMboldSymbol_0.tff'), format('truetype') 
} 
body { 
 font-family: gotham_symbol;
font-size: 50pt;
}
</style>
</head><body leftmargin="0" topmargin="0">
This is <i>italic</i> and this is <b>bold</b> and this is some unicode: &#1101;
</body></html>

我使用的是iOS 4.2,因此应该支持TTF。我很欣赏一些实际可行的HTML /代码。

3 个答案:

答案 0 :(得分:99)

经过一些尝试和错误后,我找到了一种可靠的方法来加载带有本地CSS的自定义字体。

1。将您的字体添加到应用程序...确保该文件是目标     适当的应用程序

enter image description here enter image description here

2。然后将您的字体添加到yourApp-Info.plist

enter image description here

3。运行NSLog(@"Available fonts: %@", [UIFont familyNames]);检查字体/ fontfamily对系统的名称...

enter image description here

4。复制该名称并在CSS中使用它们......不需要@ font-face

body {
    font-family:"Liberation Serif";
}

答案 1 :(得分:14)

我最终让它发挥作用,虽然我不确定我上面做错了什么。这是我使用的HTML(NSString * htmll)。我添加了所有内容,其中一些可能与解决方案无关。

<html><head><style type="text/css">
@font-face {
font-family: 'gotham_symbol';
src: url('GOTHAMboldSymbols_0.ttf')  format('truetype') 
}
@font-face {
font-family: 'gotham_symbol_italic';
src: url('GothamBoldItalic.ttf')  format('truetype') 
}
#w {display:table;}
#c {display:table-cell; vertical-align:middle;}
i { font-family: 'Helvetica-BoldOblique'; }
</style></head><body topmargin="0" leftmargin="0">
<div style="display: table; width: 320px; height: 50px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
<p style="font-size:20px;font-family:'gotham_symbol';color:#97371f;">THE TEXT GOES HERE</p></div></div></div></body></html>

我按如下方式加载UIWebView:

UIWebView *webView = [[UIWebView alloc] initWithFrame:rect];
[webView makeTransparent];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[webView loadHTMLString:html baseURL:baseURL];

答案 2 :(得分:0)

对于Swift和WKWebView,这对我有用:

@IBOutlet weak var webView: WKWebView!


let html = """
<!DOCTYPE html>
<head>
    <style>
        @font-face {
            font-family: 'Raleway-Regular';
            src: url('Raleway-Regular.ttf')  format('truetype')
        }
        img {
            width: 100%;
        }
        body {
            font-family: 'Raleway-Regular';
            font-size: 30px;
        }
    </style>
</head>
<body>
    My HTML Content
</body>
</html>
"""


let baseURL = URL(fileURLWithPath: Bundle.main.bundlePath)
webView.loadHTMLString(html, baseURL: baseURL)