ios - mac - Usar fuentes personalizadas en WKWebView

google fonts

Question

Estoy usando fuentes personalizadas en mi aplicación. Se copian en paquete y se codifican en appName-info.plist. Estas fuentes funcionan perfectamente en toda la aplicación y en UIWebView.

Estoy cargando htmlString [webView loadHTMLString:htmlString baseURL:nil]; Utilizo estas fuentes en webView con css: fontFamily: fontName

Pero cuando trato de usar las fuentes personalizadas WkWebView no funcionan. WkWebView muestra fuentes predeterminadas al azar.

Traté de cargarlo con la ruta del paquete principal en la URL base y usando font-face en css: WkWebView todavía muestra fuentes aleatorias.

¿Alguna idea de cómo hacer que las fuentes personalizadas funcionen en WKWebView?

Lo siento por mi ingles

Answer 1

Aquí hay una versión rápida de 3 de @Henrik Hartz impresionante respuesta:

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

Answer 2

Como no quiero usar a otro tercero solo para eso y como estoy construyendo la cadena html en sí, tomé la primera parte del uso de la fuente y en lugar de usar una url para un archivo remoto o local, i convirtió las fuentes a base64.

El CSS se ve así:

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

Puede reemplazar FONTFAMILY con la familia que necesita y FONTBASE64 con la cadena base 64 que se generó a partir de la fuente.

Si necesita crear la cadena base64 en su aplicación, puede usar esto, solo proporcione el nombre de archivo y el tipo (también lo usé para obtener otros archivos para que sea más genérico, puede eliminar el parámetro ofType y usar @ "ttf" en lugar):

- (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 desea hacerlo solo una vez y luego guardarlo en algún archivo, puede usar cualquiera de los sitios web en línea que convierten archivos a base64, como este: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Answer 3

Me enfrenté al mismo problema, en mi caso podría solucionarlo SIN usar la codificación base64 y GCDWebServer .

Guión:

• La carga de WkWebView se realiza a través de cadenas html
• WkWebView está utilizando .css local
• Las fuentes son locales y se agregan en el proyecto de nivel superior
• Las entradas para las fuentes se proporcionan en appName-info.plist debajo de las Fonts provided by application clave Fonts provided by application

Solución:

Agregue la fuente en .css en el nivel superior de la siguiente manera

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

PROYECTO DEMO

Enlace del proyecto GitHub

NOTA : La ejecución de la nueva aplicación de demostración puede demorar de 2 a 3 segundos, la he probado para una cadena html larga, funciona igual que UIWebView, sin retrasos. La misma fuente puede parecer un poco más pequeña en WKWebView que UIWebView.

Answer 4

Supongo que WKWebView ya no puede acceder a fuentes específicas de la aplicación porque ahora está en un proceso separado (XPC).

Lo solucioné agregando la fuente con las declaraciones @font-face en CSS. Consulte here para obtener detalles sobre MDN sobre cómo hacer esto.

Ejemplo:

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

Pero esto va a hacer referencia a un archivo local, que WKWebView no puede hacer (supongo que ya lo ha descubierto porque está cargando una cadena HTML en lugar del archivo local). Según un comentario sobre esta pregunta , pude usar GCDWebServer para que mi archivo HTML local funcionara. En su delegado de aplicaciones, después de agregar los archivos relevantes a su proyecto según el wiki de GCDWebServer en 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];

Ahora puede hacer referencia a un archivo HTML llamado test.html en su paquete como este:

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

Coloque la declaración @font-face mencionada anteriormente en un elemento de style en su archivo HTML (o en su cadena HTML si realmente solo necesita cargar una cadena) y debería estar listo.

Answer 5

Suponiendo que incruste la fuente en su aplicación como un recurso que se copia en el paquete de destino, puede darle acceso a WKWebView a la fuente pasando un NSURL a su carpeta como baseURL

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

y defina la URL de la fuente sin ningún elemento de ruta anterior, lo que a su vez hace que WKWebKit anteponga la baseURL

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