等待，又是的等待！我非常讨厌等待好吗！凭什么是得我跟着你们去做你们的事，而不是你们跟着我们去做我们的事呢？！这完全就是觉得我们没事干闲得发慌于是硬是给点事我们干啊啊啊！那种从一开始就被看低一等的感觉太恶心。多年以来都说什么职业不分贵贱，但如果连你正常工作的时间和机会都没有，一辈子地当兼职神马，这算个毛线啊啊啊啊啊啊啊。别人有心要坑你是无法避免的，不往那个地方费任何关注就好。我不能理解那些不做好自己的事却一直纠结别人“可能”没事干的人到底什么心态。
昨晚打算花点时间解决DIR字体的问题，结果花了一整个晚上，到1130才睡觉居然还都没搞成，我被我以为的小儿科绊了一个大筋斗。一直以来DIR的某些字体用的是Google的font API，但自从G老师在天朝被阉割得越来越厉害后G老师的众多API当然无法使用了。我对这个并不怎么烦心，因为翻墙是我的基本技能，但不是所有人都懂这个且习惯做这个。过了好长的时间（接近大半年）我终于忍无可忍，决心要把从前简单地用
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'/> |
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'/>
实现的功能改掉，因为，在天朝根本无法load出这个，要等浏览器load很久才最终意识到自己load不出是个连我自己都不愿意等待的事。所以很长一段时间以来，要打开http://adelrio.diandian.com/我都是用翻墙方式的，并不是这个网站有什么特别，只是因为我引用了需要Google API的东西，而那些东西又load不出来，所以导致网站假死，如果有足够多的耐心，当然可以打开，但显然，我连自己都懒得等。Google的Font API是个非常优秀的玩意，用一个语句就解决了让你自己去折腾半天都做不出来且很累赘麻烦的东西，他们有精确的浏览器判定，有经过cdn最优化的下载文件，我们这些凡夫俗子的脑子怎么可以跟他们比。精准我们比不上，因为我们不是浏览器控怎么可能每个都耳熟能详知道它们的脾气如何，要用什么格式的东西去喂养。我们也不会得到Google那么豪气干云的世界各地服务器，文件下载速度谁也不能保证能比他们更快了。但即便如此羁绊，我们还是得用很落后老气肯定有缺陷的方法去取代方便简单的高精尖，因为，事实摆在眼前，Google在天朝无路可走。
我用的方式是在css里自定义字体，也就是在css里作一个声明，从外部引用字体，然后在css里需要的某些元素里使用。这个方法很容易被明白，但难就难在不同的浏览器只会辨认某种或某几种字体，所以你要适配所有新老浏览器就得搞出N多来，比如说：woff，woff2，eof，ttf，svg等等。woff可以被Firefox和版本35以下的Chrome辨认，woff2貌似是Chrome 35以上的选择？反正我用了woff2，Chrome 39还是理解无能。IE这个屌丝只认识eof，IE6-8和IE9认识的eof版本还不一样！ttf比较大路iOS，Android，Firefox，Chrome，Safari，Opera都通杀。老版本的iOS只认识svg。想死的心都有了有木有！这还只是个开始！因为Firefox和IE还有同源网站规则，如果字体和网站都在同一个地方当然没问题，但作为一个前端设计，我怎么可能控制得了东西都能在服务器端呢！引用使用字体会让浏览器觉得不安全，和图片等不同，不同源就会导致浏览器无法正常加载你放在别处的字体。我那个去！我一直用Firefox做测试，难怪怎么搞怎么不对劲，但在Chrome上却一直对劲得很。关于这个不同源的问题，我举手投降。因为我肯定做不到让字体文件和DIR同源，我也做不到要求服务商点点在服务器给我来一句开绿灯的语句让我的字体文件不被浏览器觉得不安全。我只能自欺欺人地觉得，估计只有我这种少数屌丝是用Firefox来开DIR的吧…… 我自己的做法是在本地就安装我的特殊字体，字体引用的第一步是查找local，有了就不用下载那么麻烦了，不用下载当然在FF下也能正常显示字体。我已经尽力了好吗！
我使用的语句是：
@font-face { font-family: 'Cabin Sketch'; font-style: normal; font-weight: 700; src: local('CabinSketch Bold'), local('CabinSketch-Bold'), url(http://x.srcdd.com/farm1/5b7f4a/8fe24307/cabinsketchbold.woff) format('woff'), url(http://x.srcdd.com/farm1/5b7f4a/28d84744/cabinsketchbold.woff2) format('woff2'), url(http://x.srcdd.com/farm1/5b7f4a/fbf35def/cabinsketchbold.ttf) format('truetype'), url(http://x.srcdd.com/farm1/5b7f4a/47370689/cabinsketchbold.eot) format('embedded-opentype'); } |
@font-face { font-family: 'Cabin Sketch'; font-style: normal; font-weight: 700; src: local('CabinSketch Bold'), local('CabinSketch-Bold'), url(http://x.srcdd.com/farm1/5b7f4a/8fe24307/cabinsketchbold.woff) format('woff'), url(http://x.srcdd.com/farm1/5b7f4a/28d84744/cabinsketchbold.woff2) format('woff2'), url(http://x.srcdd.com/farm1/5b7f4a/fbf35def/cabinsketchbold.ttf) format('truetype'), url(http://x.srcdd.com/farm1/5b7f4a/47370689/cabinsketchbold.eot) format('embedded-opentype'); }
即便这么写，但在IE7-8下仍是无法正常显示的，具体原因可能是同源规则。虽然设定了woff2，但在Chrome 39下仍是无能，原因母鸡，难道39也玩同源！但Chrome 35是woff和ttf都通杀这么好人的啊啊啊啊啊啊啊，怎么越长大越不对劲了！Firefox因为同源规则，无能。所以写了这么一大堆，试图去hack，但最终不过是在Chrome 35，搜狗浏览器，以及安卓手机（小米1S青春，Android版本为4.1）下OK。关于是不是同源规则导致的显示出错我可以在自己的网站上做测试，但知道和不知道结果都一样，泪奔～ 因为知道了我也无法要求点点在服务器那边做点什么。
要成功一点都不容易，要失败，一个细微问题就足够了。
本文链接：https://my.lmcjl.com/post/3869.html
4 评论