h5页面自定义字体_UIWebView使用app内自定义字体
最近,做了个小需求。因为app是使用的自定义字体,所以产品想让h5的字体跟app的字体一致,减少脱离感。而一般来说,app内的h5页面,都是显示系统的默认字体。要想使用自定义字体,一般的做法是在h5里面加上字体库,然后app端,在加载url的时候,会去下载这些字体。但是字体包一个动辄3,4M,要是有多个字体库的话,不用想,体验会很糟糕。所以这种下载的方式不太可行。但它的好处就是,在所有的浏览器上都支持。
指定font-family
搜索一番,发现可以直接指定font-family为iOS字体库的名字。比如app引用的是圆体,打开LaunchPad-->其他-->字体册,搜圆体,PostScript名称就正是我们需要的。如图。
1.png
然后在html中,或者css。这里为了方便,直接将样式写在了html中了。
.p1 {
font-family: "STYuanti-SC-Regular";
font-size: 30pt;
color: red;
}
你好吗
之后,在app里加载url,(o)/~,是不是变成圆体了。注意,这个前提是首先你得在app里加入圆体字体库,并添加到plist中。如下图。
plist.png
不过这种方式的缺点就是,只适用于iOS,因为字体库名是iOS内置字体库里面的。但是app都会有两端。所以此种方式,舍弃。
另寻出路
换个思路,既然字体库都已经在app内有了。可不可以直接借用呢?既省流量,又有好的体验。当然是可以的!!
在html/css内,这样写。使用font-face,src为字体库名称。
@font-face {
font-family: 'Yuanti-SC-Regular';
src: url('Yuanti-SC-Regular.ttf') format('truetype')
}
.p1 {
font-family: "Yuanti-SC-Regular";
font-size: 30pt;
color: red;
}
用charles抓包发现,下载ttf的请求如下。
3.png
下载字体请求的url如下。
http://172.19.144.94/testFont/Yuanti-SC-Bold.ttf
跟使用本地图片的方式一样,可以用URLProtocol拦截请求,当检测到是ttf下载时,可以将本地的字体库读出来,直接将data返回。
于是乎,自定义CustomURLProtocol: NSURLProtocol。在AppDelegate注册。
[NSURLProtocol registerClass:[CustomURLProtocol class]];
关键代码:
- (void)startLoading
{
NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy];
[NSURLProtocol setProperty:@YES forKey:URLProtocolHandledKey inRequest:mutableReqeust];
if ([[self.request.URL absoluteString] hasSuffix:@"ttf"]) {
// fontName
NSString *fontName = [[self.request.URL.absoluteString lastPathComponent] stringByDeletingPathExtension];
NSString *path = [[NSBundle mainBundle] pathForResource:fontName ofType:@"ttf"];
NSData *fontData = [NSData dataWithContentsOfFile:path];
NSURLResponse *response = [[NSURLResponse alloc] init];
[self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
[self.client URLProtocol:self didLoadData:fontData];
[[self client] URLProtocolDidFinishLoading:self];
}else{
self.connection = [NSURLConnection connectionWithRequest:mutableReqeust delegate:self];
}
}
限制:由于WKWebView不能使用urlprotocol,所以只能在UIWebView中使用。
说明一下,demo中的web文件夹,即为测试的html和css,如要本地测试,可放到Nginx服务器上,然后修改下demo中的url,便可看到效果。
h5页面自定义字体_UIWebView使用app内自定义字体相关推荐
- UIWebView使用app内自定义字体
最近,做了个小需求.因为app是使用的自定义字体,所以产品想让h5的字体跟app的字体一致,减少脱离感.而一般来说,app内的h5页面,都是显示系统的默认字体.要想使用自定义字体,一般的做法是在h5里 ...
- android 怎么获取app 字体颜色,Android APP使用自定义字体实现方法
android系统内置字体 android 系统本身内置了一些字体,可以在程序中使用,并且支持在xml配置textView的时候进行修改字体的样式.支持字段为android:textStyle ,an ...
- 怎样微信扫描二维码跳转页面,H5页面在微信中下载APP的实现方式
使用微信推广的用户经常都会遇到推广链接被拦截导致无法下载app的情况,此时用户在微信中打开会提示" 已停止访问该网页 ".这对于使用微信营销的商家来说就很不友好且损失非常大,因为用 ...
- android 自定义字体 ttf,Android APP支持自定义字体
情景:需要为整个应用替换自定义字体. Android对于文字的字体设置主要是通过以下两个对象 FontFamily.Typeface 在XML文件中设置单个字体: android:id="@ ...
- (原创)设置APP内的字体
在进行开发时,有时候需要设置自己的字体,那么Android中是如何设置自己的字体的呢? 先来看一下页面效果 可以看到这是自己的字体,而不是Android系统自带的字体,下面来讲一下实现方式 具体可以有 ...
- 微信中无法下载APP h5页面在微信中下载APP的解决方案
很多朋友都已经习惯在微信内分享网页链接和二维码了,通过扫描二维码下载APP或打开网页也成为大家惯用且非常方便的方式了.如此微信就成为了扫描二维码重要的工具,因为对于用户来说,说到二维码大家第一反应就是 ...
- 在H5页面中跳转到地图App,或者在本地App中加载的H5页面跳转到地图App,唤起App进行导航
在H5中使用地图导航 1.腾讯地图: 2.高德地图: 3.百度地图: 1.腾讯地图: 调用方式: http://apis.map.qq.com/uri/v1/marker?marker=coord:l ...
- h5页面生成图片分享到微信js_H5微信自定义分享链接(设置标题+简介+图片)
起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看 ...
- H5页面中调起高德地图app,如果未安装应用,则提示用户安装
一.需求: 在之前做的项目中,有个需求是,点击"去这里"的按钮,会调起高德地图app,并导航至目的地,如果用户未安装高德地图app,则提示用户需先下载 二.代码部分 1.获取目标地 ...
最新文章
- 微信小程序 - 富文本图片宽度自适应(正则)
- 剑指offer java版(三)
- H5 新标签用法及解释
- class不生效 weblogic_weblogic配置Log4j不生效的问题
- vs 2005 下载,再汉化---没想到是痛苦的过程
- 2020年,产品经理如何提高求职成功率?
- STM32开发 -- Systick定时器
- API网关Kong(二):Kong与Kubernetes集成的方法
- ecm工作原理 usb_“好玩具”来了!往你的USB端口里藏入一个小开发板...
- 对DataTable的一些解释
- java cha r转string_JAVA String.format 方法使用介绍
- python socket模块 和pyqt_使用PyQt和Socket进行聊天编程[标准库]
- 灵魂拷问!软件架构师书籍
- 干货 | 携程动态表单DynamicForm的设计与实现
- 执行SOA ——SOA实践指南
- u8、u16、u32、s8、s16、s32、Size_t是什么类型?
- L1正则化优化问题的一种求解方法
- 14、RH850 F1 RAM存储器介绍
- python怎么新建工程_Python vue坏境搭建及项目创建
- MyBatis批量插入几千条数据,慎用Foreach