Używanie niestandardowych czcionek w WKWebView

Question

Używam niestandardowych czcionek w mojej aplikacji. Są one kopiowane do pakietu i zakodowane na stałe do appName-info.plist. Ta czcionka działa doskonale w całej aplikacji oraz w interfejsie UIWebView.

Im ładowanie htmlString [webView loadHTMLString:htmlString baseURL:nil]; używam tej czcionki w WebView z CSS: fontFamily: fontName

Ale gdy próbuję użyć WkWebView niestandardowe czcionki nie działa. WkWebView wyświetla losowe domyślne czcionki.

Próbowałem załadować ją główną ścieżką pakietu w bazowym url i używając font-face w css - WkWebView nadal wyświetla losowe czcionki.

Jakieś pomysły dotyczące tworzenia niestandardowych czcionek działają w WKWebView?

Przepraszam za mój angielski

Answer 1

Domyślam się, że nie mogą już WKWebView czcionek dostępu specyficzne dla aplikacji, ponieważ jest teraz w oddzielnym procesie (XPC).

Obejmuję to, dodając czcionkę z deklaracjami @font-face w CSS. Szczegółowe informacje na temat MDN na ten temat można znaleźć w sekcji here.

Przykład:

@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; 
} 

Ale to będzie odwoływać się do lokalnego pliku, którego nie można zrobić WKWebView (zakładam już odkrył to, bo jesteś ładowania ciąg HTML zamiast plik lokalny). Zgodnie z komentarzem na temat this question, udało mi się użyć GCDWebServer, aby mój lokalny plik HTML działał. W delegata aplikacji, po dodaniu odpowiednich plików do projektu zgodnie Wiki GCDWebServer w serwisie 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]; 

Teraz można odwoływać plik HTML o nazwie test.html w wiązce tak:

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

Umieść wyżej wymienioną deklarację @font-face w elemencie style w pliku HTML (lub w ciągu HTML, jeśli naprawdę potrzebujesz załadować ciąg) i powinieneś być gotowy.

Answer 2

Ponieważ nie chcę używać innej strony trzeciej do tego celu, a ponieważ sam buduję ciąg znaków html, zrobiłem pierwszą część korzystania z font-face i zamiast używać adresu URL do pilota lub plik lokalny, przekonwertowałem czcionki na base64.

css wygląda następująco:

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

Można wymienić fontFamily z rodziną, że trzeba i FONTBASE64 z ciągiem podstawa 64, który został wygenerowany z czcionki.

Jeśli chcesz utworzyć ciąg base64 w swojej aplikacji, możesz użyć tego, wystarczy podać nazwę pliku i typ (użyłem go do uzyskania innych plików, aby był bardziej ogólny, można usunąć parametr ofType i użyć @ „TTF” zamiast):

- (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; 
} 

jeśli chcesz zrobić to tylko raz, a następnie zapisać go w jakimś pliku, można użyć dowolnej z witryn internetowych, które konwertuje pliki do base64, tak: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Answer 3

Napotkałem ten sam problem, w moim przypadku mogłem go naprawić BEZ przy użyciu base64 kodowanie i GCDWebServer.

scenariusz:

• WkWebView ładowanie jest przez ciąg html
• WkWebView wykorzystuje lokalny .css
• Czcionki są lokalne i są dodawane w projekcie najwyższego poziomu
• Wpisy dla czcionek są warunkiem w appName-info.plist pod kluczem Fonts provided by application

---

Rozwiązanie:

Dodaj krój czcionki w .css na najwyższym poziomie następująco

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

---

DEMO Projekt:

GitHub Project Link

UWAGA: Świeża aplikacja demo może trwać 2-3 s, testowałem ją na długi ciąg html działa tak samo jak UIWebView, bez opóźnień. Ta sama czcionka może wyglądać nieco mniej w WKWebView niż w UIWebView.

Answer 4

Zakładając osadzić czcionki w aplikacji jako zasób, który jest skopiowany do pakietu docelowego, można dać dostęp WKWebView do czcionki przepuszczając bibliotece NSURL do swojego folderu jako baseURL

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

i zdefiniować url font-face bez żadnych elementów ścieżki poprzedzający, co z kolei sprawia, że ​​WKWebKit Dołączenie baseURL

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

Answer 5

Oto szybki 3 wersja @Henrik Hartz niesamowitej odpowiedzi:

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