我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
远程字体 详解阿里巴巴矢量字体库css原理
关于自定义字体,我一开始只以为只能本地加载,也就是css里面定义的字体,都只能从本地加载到,但是后来我了解到字符图标,一开始也是照本宣科使用本地字体,这就导致了一个问题,如果服务器网速带宽不够,就会产生字符字体文件未加载完整时,有一个占位字符显示,时间一长就显得极度的难看。
然后我使用了阿里矢量字体库里面的字体,是可以直接下载一个css文件,然后本地引用,就可以直接用了,我就奇了怪了,怎么做到的,当然,这个疑问到今天也就完全明白了。
首先要明确一点,阿里巴巴的那个css文件虽然写的很多,但是个人测试的时候好像也不支持ie9以下,也不知道是代码问题还是什么,不过现在能兼容ie11就不错了。
自定义字体
@font-face {
font-family: fonts;
src: url("font.eot") format("eot");
src: url("font.eot?#iefix") format("embedded-opentype"),
url("font.woff2") format("woff2"),
url("font.woff") format("woff"),
url("font.ttf") format("typetrue"),
url("font.svg") format("svg");
font-weight: normal;
font-style: normal;
}
我们可以看到,标准的自定义字体,为了兼容性,使用了5种字体格式,如果一个字体文件大小是100kb,这里就要500kb,如果使用的是中文字体文件,那么将要达到MB级的大小,这对于服务器来说,压力是很大的。
精简字体
首先我们了解一下每种字体文件对应的兼容对象
字体格式 | 兼容对象 |
---|---|
eot | ie6-8 |
woff2 | 现代浏览器都支持,ie9-11 |
woff | woff2的上一代,现代浏览器都支持, ie9-11 |
ttf | Android 4.3及一下 |
svg | ios 4.1及以下 |
我们可以发现svg格式的兼容已经可以放弃了,然后就是eot,事实上eot也是可以放弃的,因为ie9及以上支持woff系列字体,而ttf事实上可以放弃了,虽然我手里自己还有一台老安卓手机,但是拿它来浏览网页,除非我疯了。
所以,最极简的方式就是只使用woff系列,但是为了兼容性,一般很多人会在开头加上eot。
无用的iefix
@font-face {
font-family: fonts;
src: url("font.eot") format("eot");
src: url("font.eot?#iefix") format("embedded-opentype"),
url("font.woff2") format("woff2"),
url("font.woff") format("woff"),
font-weight: normal;
font-style: normal;
}
这里我们使用了两个eot,其中第二个eot后面有一个#iefix,事实上这个东西一点用都没有,有用的是他前面的?问号。
原因是因为ie9之前的版本有一个解析的bug,如果src里面有多个url()属性,ie会把后面的所有字符都当做一个url地址解析,这就导致地址错误而返回404,于是我们给eot后面加上?问号,这样后面的内容就会作为url的参数传递而不会影响到正确的链接。
用过get请求的应该明白是怎么一回事吧,所以#iefix没用,删除也是可以的。
但是我们可以发现,既然可以有多个url属性,那么为什么要两个src呢?
两个src的原因
原因是因为我们一般测试ie的兼容的性的时候,现在都习惯直接在ie的开发者工具里选择对应的ie版本进行测试,这样既方便又省事,但是事实是这样开启的ie低版本ie8及以下的时候,是无法识别?问号这种解决方案的,这就导致我们在测试的时候无法通过刚刚说明的办法来解决问题,反倒生成了新的问题。
所以一般都会在开头第一句src上使用一个不带?问号的用于解决这个问题,所以会有连个src。
但是现在我们不需要再去兼容低版本的ie了,并且连jq都开始放弃低版本的ie,所以我们可以去除eot的请求。
@font-face {
font-family: fonts;
src: url("font.woff2") format("woff2"),
url("font.woff") format("woff"),
font-weight: normal;
font-style: normal;
}
如果你想保险一点,还可以使用这种写法:
@font-face {
font-family: fonts;
src: url("font.eot");
src: local("☺"),
url("font.woff2") format("woff2"),
url("font.woff") format("woff"),
font-weight: normal;
font-style: normal;
}
我们在第二个src中使用了一个loacl属性,其作用是用于防止低版本ie请求完eot后还请求后面的woff字体。
local()是表示从用户系统中加载字体,然后笑脸字符ie6-8并不识别,于是完美跳过了这个src,而高版本的ie9-11则可以继续请求后面的woff。
远程字体
我们可以将字体存储在其他服务器中,通过链接请求的方式加载到本地,但是要注意的是,web是默认禁止跨域访问的,所以你可能回遇到请求被禁止的访问的情况。
解决这个问的办法也很简单,我们可以设置服务器允许所有的访问,这里以nginx为例,我们在对于的站点配置加入以下这段文本:
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
}
设置完毕后,我们可以将字体文件上传至你想要的位置,然后通过http请求这个文字,比如:https://xxx.xxx.com/fonts/font.eot
然后对应替换掉url属性里的链接就行了。
阿里巴巴矢量字体库css
阿里的css它的woff2的url属性是一个base64的转换,我们也可以自己手动将字体转换成base64,而且要注意的是,base64的优点就是在于减少了http的请求,但是base64并不能压缩大小,反倒如果文件过大,转换后的代码大小会比原来的更大一些,所以转换的时候注意下文件的大小再做选择。
还有一点需要注意的就是,转换过来的base64你可以用引号包裹,也可以不用,我测试的时候两种方式浏览器都能正常识别到。
这里再附上一个在线字体转base64的网址:
使用方法也很简单,先add上传需要转码的字体文件,然后打开base64按钮,勾选woff2格式,然后按convert按钮,等待一会就会出现下载文件,自己下载完毕将css文件中的base64复制到你自己的css文件中即可。
评论(0)