在 UIWebView 中使用自定义字体答案

【问题标题】：Using custom font in a UIWebView在 UIWebView 中使用自定义字体
【发布时间】：2012-05-16 11:15:57
【问题描述】：

我想在 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/代码。

【问题讨论】：

GOTHAMboldSymbol_0.tff - 扩展名应该是ttf（除非该字体在磁盘上确实有tff 扩展名）。
我也在努力寻找解决方案，但是：我认为你想为 baseURL 传递 'nil'。
@Joris 我现在也遇到了同样的问题，如果你找到了解决方案，我会很高兴。
我在下面发布了我的 html...让我知道它是否适合您

标签： ios uiwebview fonts truetype

【解决方案1】：

尽管我不确定我在上面做错了什么，但我最终还是成功了。这是我使用的 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];

【讨论】：

奇怪的是，Lindemann 的其他解决方案对我不起作用，但这确实有效。

【解决方案2】：

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

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

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

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

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

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

【讨论】：

抱歉，我包含了该步骤。我不知何故认为你已经完成了那一步......
谢谢！这在任何地方都有记录吗？
第 1-3 步基本上是向应用程序添加自定义字体的标准方法......所以是的，它已记录在案。在最后一步中，您使用调用系统上可用字体的标准方法... :-)
对于您应该使用的实际字体名称：[UIFont fontNamesForFamilyName:"Liberation Serif"]
它仍然适用于最新版本的 iOS。我的环境是iOS SDK 11.2。

【解决方案3】：

对于 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)

必须像往常一样将字体添加到 XCode 项目中，并复制捆绑资源

<key>UIAppFonts</key>
<array>
    <string>Raleway-Bold.ttf</string>
    <string>Raleway-Regular.ttf</string>
</array>

【讨论】：

就我而言，baseURL 是秘密，谢谢。
字体需要和html在同一个目录吗？
我添加了有关字体包含的说明。