Использование пользовательских шрифтов в WKWebView

Ответ 1

Так как я не хочу использовать для этого другую третью сторону, а так как я строю строку html, я взял первую часть использования шрифта и вместо того, чтобы использовать url для удаленного или локального файл, я преобразовал шрифты в base64.

css выглядит так:

@font-face {
    font-family: 'FONTFAMILY';
    src: url(data:font/ttf;base64,FONTBASE64) format('truetype');
}

Вы можете заменить FONTFAMILY на семейство, в котором вы нуждаетесь, и FONTBASE64 с базой 64, созданной из шрифта.

Если вам нужно создать строку base64 в вашем приложении, вы можете использовать это, просто укажите имя и тип файла (я использовал его для получения других файлов, чтобы он был более общим, вы можете удалить параметр theType и использовать @вместо "ttf" ):

- (NSString*)getBase64FromFile:(NSString*)fileName ofType:(NSString*)type
{
    NSString * filePath = [[NSBundle mainBundle] pathForResource:fileName ofType:type];

    // Create NSData object
    NSData *nsdata = [NSData dataWithContentsOfFile:filePath];

    // Get NSString from NSData object in Base64
    NSString *base64Encoded = [nsdata base64EncodedStringWithOptions:0];

    return base64Encoded;
}

если вы хотите сделать это только один раз, а затем сохранить его в каком-то файле, вы можете использовать любой веб-сайт, который преобразует файлы в base64, например: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Ответ 2

Я столкнулся с той же проблемой, в моем случае я мог бы исправить ее БЕЗ, используя кодировку base64 и GCDWebServer.

Сценарий:

• Загрузка WkWebView через строку html
• WkWebView использует локальный .css
• Шрифты являются локальными и добавляются в проект верхнего уровня.
• Записи для шрифтов предоставляются в appName-info.plist под ключ Fonts provided by application

Решение:

Добавьте грань шрифта в .css на верхнем уровне следующим образом

@font-face
{
    font-family: 'FontFamily';
    src: local('FontFamily'),url('FontFileName.otf') format('opentype');
}

ПРОЕКТ DEMO:

Ссылка на проект GitHub

ПРИМЕЧАНИЕ: запуск нового демонстрационного приложения может занять 2-3 секунды, я тестировал его на длинные строки html, он работает так же, как UIWebView, без лагов. Тот же шрифт может выглядеть немного меньше в WKWebView, чем в UIWebView.

Ответ 3

Предполагая, что вы вставляете шрифт в приложение как ресурс, скопированный в целевой пакет, вы можете предоставить WKWebView доступ к шрифту, передав ему NSURL в качестве базы baseURL

NSString *bundlePath = [[NSBundle mainBundle] bundlePath];
NSURL *bundleUrl = [NSURL fileURLWithPath:bundlePath];
[self.webView loadHTMLString:HTML baseURL:bundleUrl];

и определите URL-адрес шрифта без каких-либо предшествующих элементов пути, что, в свою очередь, заставит WKWebKit добавить baseURL

<style>
  @font-face { font-family: 'Custom Font'; src: url('CustomFont.ttf'); }
  ...
</style>

Ответ 4

Я предполагаю, что WKWebView больше не может обращаться к шрифтам, специфичным для приложения, потому что теперь он находится в отдельном процессе (XPC).

Я обошел это, добавив шрифт с объявлениями @font-face в CSS. См. здесь для получения подробной информации о MDN о том, как это сделать.

Пример:

@font-face
{
  font-family: "MyFontFace";
  src:url('url-to-font.ttf');
}

//And if you have a font with files with different variants, add this:
@font-face
{
  font-family: "MyFontFace";
  src:url('url-to-italic-variant.ttf');
  font-style:italic;
}

Но это будет ссылка на локальный файл, который не может выполнить WKWebView (предположим, вы уже это обнаружили, потому что вы загружаете HTML-строку вместо локального файла). В соответствии с комментарием этот вопрос я смог использовать GCDWebServer для получения моего локального файла HTML. В делетете приложения после добавления соответствующих файлов в проект в соответствии с вики GCDWebServer на GitHub:

GCDWebServer *server = [[[GCDWebServer alloc]init]autorelease];
NSString *bundlePath = [[NSBundle mainBundle] bundlePath];
[server addGETHandlerForBasePath:@"/"
   directoryPath:bundlePath indexFilename:nil
   cacheAge:0 allowRangeRequests:YES];
[server startWithPort:8080 bonjourName:nil];

Теперь вы можете ссылаться на HTML файл с именем test.html в вашем пакете следующим образом:

NSString *path = @"http://localhost:8080/test.html";
NSURL *url = [NSURL URLWithString:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[myWebView loadRequest:request];

Поместите вышеупомянутое объявление @font-face в элемент style в вашем HTML файле (или в вашей строке HTML, если вам действительно просто нужно загрузить строку), и вам должно быть хорошо идти.

Ответ 5

Вот краткая 3 версия @Henrik Hartz удивительный ответ:

loadHTMLString(htmlString, baseURL: NSURL.fileURL(withPath: Bundle.main.bundlePath))