À l'aide de polices personnalisées dans WKWebView

Je suis en utilisant des polices personnalisées dans mon application. Ils sont copiés dans le bundle et codé en dur à appName-info.plist.
Cette polices fonctionne parfaitement dans l'ensemble de l'application et dans UIWebView.

Im chargement htmlString
[webView loadHTMLString:htmlString baseURL:nil];
Je utiliser ces polices dans webView avec les css:
fontFamily: fontName

Mais lorsque j'essaie d'utiliser WkWebView des polices personnalisées ne fonctionne pas. WkWebView affiche par défaut au hasard des polices.

J'ai essayé de le charger avec les principaux bundle chemin dans l'url de base et à l'aide de font-face dans les css - WkWebView affiche toujours aléatoire polices.

Toutes les idées sur la façon de faire de polices personnalisées travail dans WKWebView?

Désolé pour mon anglais

  • Comment est-il, comme dans iOS 9? WKWebView dans iOS 9 pouvez charger des fichiers locaux maintenant, est-il aussi capable de charger les polices?
InformationsquelleAutor Sashke | 2014-09-11
  1. 39

    J'ai fait face à la même question, dans mon cas, j'ai pu le résoudre SANS à l'aide de de l'encodage base64 et GCDWebServer.

    Scénario:

    • WkWebView de chargement est par le biais de la chaîne html
    • WkWebView est à l'aide de local .css
    • Polices locales et sont ajoutés à haut niveau projet
    • Entrées pour les polices de caractères sont fournis dans nom-info.plist sous clé Fonts provided by application

    Solution:

    Ajouter de la police face à .css au plus haut niveau comme suit

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

    PROJET DE DÉMONSTRATION:

    Projet GitHub Lien

    NOTE: Frais de démonstration app peut prendre de 2 à 3 secondes, je l'ai testé pour la longue chaîne html il fonctionne même que UIWebView, pas de lag. Même police peut paraître peu plus petit dans WKWebView que UIWebView.

    • Merci pour le GitHub de démonstration, vous avez sauvé ma vie !
    • Doux, j'ai réussi à utiliser une police personnalisée!
    • Même la police look peu plus petit dans WKWebView que UIWebView.Comment faire de la police le même aspect?Quand je change de UIWebView à WKWebView,la police sont devenus plus petits,comment puis-je éviter ce changement?
    • Ajouter ceci dans votre en-tête <meta name="viewport" content="initial-scale=1.0" />
    • Je vous remercie beaucoup. Et le projet github aide vraiment
    • Merci beaucoup! Ce qu'il est corrigé. Merci pour le fichier d'exemple.

    InformationsquelleAutor Aditya Deshmane
  2. 30

    En supposant que vous intégrer la police dans votre application comme une ressource qui est copié vers la cible bundle, vous pouvez donner à la WKWebView accès à la police par le passage d'un NSURL à il du dossier que le baseURL 

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

    et de définir le type de police url sans précédent éléments de chemin d'accès, ce qui rend WKWebKit ajouter le baseURL

    <style>
  @font-face { font-family: 'Custom Font'; src: url('CustomFont.ttf'); }
  ...
</style>
    • que faire si il y a plusieurs polices personnalisées ?
    • Je n'ai pas essayé, mais ma solution ne se limite pas à un nom de police spécifique, il ajoute juste un chemin de recherche si vous voulez.
    • Pour les autres, en essayant de cela, IL FONCTIONNE!... mais iOS police les noms de fichiers sont sensibles à la casse, donc assurez-vous de faire correspondre les fichiers de police chameau cas dans l'url utilisée dans l' .css 🙂
    • Cette solution FONCTIONNE. Aussi, si la famille a des versions, dans mon cas, Ubuntu-R. ttf, Ubuntu-C. de la fft, etc. vous devez spécifier un seul ttf comme dans: @font-face { font-family: 'Ubuntu-R'; src: url('Ubuntu-R.ttf'); } Fonctionne à merveille. Merci!!!!
    • Merci pour sane solution. Une suggestion: Vous pouvez créer le bundle url directement au lieu d'utiliser le chemin d'accès. par exemple, NSURL *bundleURL = [[NSBundle mainBundle] bundleURL];
    • J'ai un soucis. Serait réglage baseURL de regroupement principal des pauses toutes les url relatives à votre rendu html? Parce qu'il permettrait de résoudre sur main bundle url au lieu d'une vraie API url. Je pense que c'est un gros problème.

    InformationsquelleAutor Henrik Hartz
  3. 21

    Car je ne veux pas utiliser un autre tiers juste pour ça et depuis que je suis en train de construire la chaîne html lui-même, j'ai pris la première partie de l'aide de la police et au lieu d'utiliser une url à un local ou à distance de fichier, j'ai converti les polices en base64.

    Le css ressemble à ceci:

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

    Vous pouvez remplacer le FONTFAMILY avec la famille que vous avez besoin et le FONTBASE64 avec la base de 64 chaîne a été générée à partir de la police.

    Si vous avez besoin pour créer la chaîne base64 dans votre application, vous pouvez l'utiliser, il suffit de fournir le nom de fichier et le type (je l'ai utilisé pour obtenir d'autres fichiers ainsi donc, c'est plus générique, vous pouvez supprimer le ofType paramètre et utilisez " @"ttf" à la place):

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

    si vous voulez faire une seule fois, puis de l'enregistrer dans un fichier, vous pouvez utiliser l'un des sites en ligne qui convertit les fichiers en base64, comme ceci: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

    • Cela fonctionne pour moi dans un navigateur classique, si je suis en train de tester le fichier HTML, cependant, dans WKWebView, il revient à la police par défaut. Toute idée de ce qui pourrait mal tourner? J'ai extrait le base64 valeurs de la police et l'a remplacé dans la partie appropriée dans le css-code.
    InformationsquelleAutor kalsky
  4. 9

    Ma conjecture est que le WKWebView ne peut plus accéder aux polices spécifiques à l'application, car il est maintenant dans un processus séparé (XPC).

    J'ai eu autour de ce par l'ajout de la police avec @font-face déclarations CSS. Voir ici pour plus de détails sur MDN sur la façon de le faire.

    Exemple:

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

    Mais cela ne va pas faire référence à un fichier local, qui le WKWebView ne peut pas le faire (je suppose que vous avez déjà découvert ce parce que vous êtes en train de charger une chaîne HTML au lieu du fichier). Comme par un commentaire sur cette question, j'ai été en mesure d'utiliser GCDWebServer pour obtenir mon fichier HTML local de travail. Dans votre application délégué, après avoir ajouté les fichiers à votre projet, comme par le GCDWebServer du wiki sur 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];

    Maintenant, vous pouvez faire référence à un fichier HTML nommé test.html dans votre bundle comme ceci:

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

    Mettre ladite @font-face la déclaration dans un style élément dans votre fichier HTML (ou dans votre chaîne HTML si vraiment vous suffit de charger une chaîne de caractères) et vous devriez être bon d'aller.

    • J'ai essayé de @ font-face dans le WKWebView et il ne semble pas fonctionner lors de l'exécution sur le périphérique (iOS 8.4). Oeuvres dans le simulateur bien. Essayé d'utiliser @ font-face avec WOFF, SVG et aussi inline en base64.
    • La recherche dans Safari outils de dev-il juste de dire "Une erreur s'est produite lors du chargement de la ressource", pas de codes d'erreur HTTP ou quoi que ce soit.
    • font-weight au lieu de font-style fonctionne pour moi à l'appui de gras variante.. je l'espère, sera utile pour quelqu'un...
    InformationsquelleAutor Tom Hamming
  5. 4

    Ici est une swift 3 version de @Henrik Hartz génial réponse:

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