Tengs

Design & Develop

  • 言论自由
  • 技术文档
  • 日常琐事
  • 其它东西

CSS

javascript+css判断系统是否安装有某种字体

2012年12月17日 / 5 Comments

这阵子闲来在弄一个web应用,需要一个javascript获取系统字体的功能,google百度了很久,看到的基本上都是用了activeX,代码大概是这样子:


<object id="dlgHelper" width="0px" height="0px" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"></object>

这个解决途径兼容不好。好不容易找到了一个比较强悍的解决方法,用到了flash,详细看Font detection with Javascript and Flash,虽然是成功获取了,不过感觉还是不方便,问了下高手heero兄,答曰:js没有这种接口。原本打算放弃了,学某些在线文本编辑器,只提供几种系统自带的可选字体,写成html了事,转念又想想,假如有某种办法可以检测到系统是否有安装某种字体,也能满足我的需求,事实上我只需要用到几种比较特别的字体。继续google百度后的确发现有牛人做到了,而且做法神乎其神,不信看截图:

javascript-css-font-detect

大概可以这么理解:假如系统没有某种字体,会用默认的字体替代,我们先得到默认字体显示某段字符所占据的长度,然后给这段字符定义css,把它的font-family设定为我们要检测的字体,假如长度一样,那基本证明系统没有这种字体(当然,万一两种字体虽然显示出来看上去不一样,但是它们的单个字所占宽度一致的话,这种方法似乎就不成立了),假如长度不一致,那肯定是有这种字体的。

原文的地址是:http://www.lalit.org/lab/javascript-css-font-detect/ 我英语不咋样,不知道有没弄错,你自己看看呗。


分类: 技术文档 标签: CSS, javascript

IE6 去除 input border

2011年8月10日 / 6 Comments

很多时候,我们不想要input默认的边框而自定义一些边框,甚至为了给input添加背景图片,需要去除掉input的边框。

这件工作在IE7+、firefox等高级浏览器上是很轻而易举,只需定义其 border:none; 即可。然而在IE6下这是不起作用的。这时候我们可以用比较滑头的做法,将border设置为白色,在白色背景下就把边框隐藏了。代码是 border:white; 为了表达我们对IE6的鄙视,对这个浏览器做特殊处理,也就是 css hack 一下,整个代码是:border:none;*border:white; 。现在好了,border 在 IE6 下的确不见了。

接下来我们不烦看点奇迹:border:none;*border:red; 。看到没,在白色背景下,并没有什么红色的border出现,这就是说,border真的是隐藏了,所以不管你的input背景要用什么颜色或图片,你需要做的是定义 border:none;*border:某个color;。在各种浏览器上就都能隐藏掉input的边框了。这就是 css hack,套句时髦的话,不管你信不信,反正我是信了。


分类: 技术文档 标签: bug, CSS

漏网之鱼——TT带来的痛苦挣扎

2010年9月11日 / 1 Comment

这几天和本部一个兄弟夏先生合作完成华师大的亚运志愿者网站。由于说好我负责ASP部分,所以拿到本部发来的页面后只是顺手用360安全浏览器看了一下,毫无疑问,页面设计得很漂亮,这充分说明我们的分工是正确的——起码对于美工来说,夏先生比我好。

没有过多考虑,匆匆忙忙开始拷代码,花了一天多的时间,期间与本部进行了n次的交流,基本完成了页面功能。并上传到了服务器。心里还一个劲地感慨:合作的力量还真是强大啊。因为之前总是一个人做整个网站,基本上都得拖几个星期,就页面的设计已经能累死人了。现在有个人帮忙写css,效果的确不错。这充分说明,独行侠的年代已经过时了。当然,剩下的事可以说不是我的事了,我可不想无聊到做上传文章之类的事。

没想到的是昨晚同是亚运网络小组的梁兄突然说网站有问题,看了一下,原来用的是腾讯的TT浏览器。这才突然想起做完整个页面后都没有在各个浏览器上做过相关测试。事实上我的电脑上并没安装TT,这是个很大的漏洞,因为腾讯的爪牙现在几乎是伸遍了中国任何一台能上网的PC,TT浏览器使用量还是相当可观的,而我之前测试页面居然一直没有留意到真是吓了一跳。忙回来下了一个安装。事实证明,页面在TT上确实是存在问题的。有这么几个div的嵌套:


<div>
<div style="float:left;">框一</div>
<div style="float:left;">框二</div>
</div>

在IE8上,呈现出来的页面是理想的:框一在框二的左边。但在TT上,框二却掉到了框一的下面。原本以为又是浏览器不兼容的问题,决定用css hack解决。Google了一番,却发现到此都说TT使用的是IE的核心,因而只要页面在IE上显示正常,在TT上也应该是正常的,所以TT没有特定的css hack可写。这真是见鬼了,因为在我的电脑上,整个页面在IE(win7的IE版本是IE8)上是很正常的,照上面的理论,TT上也应该正常才是。怀着不服气的心理检查了半天的css,发现没有任何问题,情绪无比低落。就在准备投降的时候,突然灵感光顾,顺手打开了IETester,先用IE6试验,发现整个页面几乎都是变形的,面红耳赤地赶紧关掉,幸好这些问题可以用css hack解决,算不上问题,又顺手用IE7试验了一下,瞬时气不打一处来。这个页面在ie7下的bug和TT上的错误是完全一致的。这么说来,TT使用的内核应该是ie7的内核,而不是我系统上的ie8的内核,这到底是什么原因,有待了解。但既然是ie7的内核,问题就好解决多了,起码我可以使用ie7的css hack来处理,这比起无从下手要简单N倍了。

记得韩寒有句很经典的话:灵感就像公共汽车,不来的时候一部都没有,一来的时候几部一起来。此时我突然又想起应该在TT上查看一下页面的源代码,起码能知道asp输出的html是不是有问题的。检查之后,发现了一个很重要的线索:如上所述的两个div,放的都是用asp生成的一个标题列表,这些列表是用table包围起来的,如下:


<div class="pack">
 <div style="float:left;" id="div1">
  <table><tr><td style="width:100%">XX的标题</td></tr></table>
 </div>
 <div style="float:left;" id="div2">
  <table><tr><td style="width:100%">XX的标题</td></tr></table>
 </div>
</div>

问题出在width:100%上,重复检查了一下css,发现夏兄没给div1和div2定义width,而我写asp的时候,却给td输出了一个wdith=100%的属性,所以div1就把整个pack的width占据了,div2自然只好放到了下面。明白了道理,解决起来就简单得不得了了,只要给div1和div2加一个width的属性,问题解决。

这件小事说明了发散性的思维是很重要的,如果我一味地去检查CSS或试图发现TT的css hack,可能这个问题是搞不定了。

但说来说去,到底TT为什么会用ie7的内核而不是系统上的ie8的内核,哈哈,鬼知道。

补记:写这篇日志之后的若干星期,无意中在IE的“开发人员工具”里发现了一个浏览器模式设置,骇然有IE7可选,可见WIN7不仅有IE8内核,还有IE7的。CS兄又指教说:如果系统用的是IE8的话,那么无论什么傲游360TT搜狗之类的外壳浏览器统统都是用IE7模式渲染的,所以一般来说为了省事我都在正式发布页面时給meta加上一句强制让IE8也用IE7模式来渲染……这个方法真是个好办法,学习学习!!

这几天和本部一个兄弟夏先生合作完成华师大的亚运志愿者网站。由于说好我负责ASP部分,所以拿到本部发来的页面后只是顺手用360安全浏览器看了一下,毫无疑问,页面设计得很漂亮,这充分说明我们的分工是正确的——起码对于美工来说,夏先生比我好。

没有过多考虑,匆匆忙忙开始拷代码,花了一天多的时间,期间与本部进行了n次的交流,基本完成了页面功能。并上传到了服务器。心里还一个劲地感慨:合作的力量还真是强大啊。因为之前总是一个人做整个网站,基本上都得拖几个星期,就页面的设计已经能累死人了。现在有个人帮忙写css,效果的确不错。这充分说明,独行侠的年代已经过时了。当然,剩下的事可以说不是我的事了,我可不想无聊到做上传文章之类的事。

没想到的是昨晚同是亚运网络小组的梁兄突然说网站有问题,看了一下,原来用的是腾讯的TT浏览器。这才突然想起做完整个页面后都没有在各个浏览器上做过相关测试。事实上我的电脑上并没安装TT,这是个很大的漏洞,因为腾讯的爪牙现在几乎是伸遍了中国任何一台能上网的PC,TT浏览器使用量还是相当可观的,而我之前测试页面居然一直没有留意到真是吓了一跳。忙回来下了一个安装。事实证明,页面在TT上确实是存在问题的。有这么几个div的嵌套:


<div>
<div style="float:left;">框一</div>
<div style="float:left;">框二</div>
</div>

在IE8上,呈现出来的页面是理想的:框一在框二的左边。但在TT上,框二却掉到了框一的下面。原本以为又是浏览器不兼容的问题,决定用css hack解决。Google了一番,却发现到此都说TT使用的是IE的核心,因而只要页面在IE上显示正常,在TT上也应该是正常的,所以TT没有特定的css hack可写。这真是见鬼了,因为在我的电脑上,整个页面在IE(win7的IE版本是IE8)上是很正常的,照上面的理论,TT上也应该正常才是。怀着不服气的心理检查了半天的css,发现没有任何问题,情绪无比低落。就在准备投降的时候,突然灵感光顾,顺手打开了IETester,先用IE6试验,发现整个页面几乎都是变形的,面红耳赤地赶紧关掉,幸好这些问题可以用css hack解决,算不上问题,又顺手用IE7试验了一下,瞬时气不打一处来。这个页面在ie7下的bug和TT上的错误是完全一致的。这么说来,TT使用的内核应该是ie7的内核,而不是我系统上的ie8的内核,这到底是什么原因,有待了解。但既然是ie7的内核,问题就好解决多了,起码我可以使用ie7的css hack来处理,这比起无从下手要简单N倍了。

记得韩寒有句很经典的话:灵感就像公共汽车,不来的时候一部都没有,一来的时候几部一起来。此时我突然又想起应该在TT上查看一下页面的源代码,起码能知道asp输出的html是不是有问题的。检查之后,发现了一个很重要的线索:如上所述的两个div,放的都是用asp生成的一个标题列表,这些列表是用table包围起来的,如下:


<div class="pack">
 <div style="float:left;" id="div1">
  <table><tr><td style="width:100%">XX的标题</td></tr></table>
 </div>
 <div style="float:left;" id="div2">
  <table><tr><td style=""width:100%"">XX的标题</td></tr></table>
 </div>
</div>

问题出在width:100%上,重复检查了一下css,发现夏兄没给div1和div2定义width,而我写asp的时候,却给td输出了一个wdith=100%的属性,所以div1就把整个pack的width占据了,div2自然只好放到了下面。明白了道理,解决起来就简单得不得了了,只要给div1和div2加一个width的属性,问题解决。

这件小事说明了发散性的思维是很重要的,如果我一味地去检查CSS或试图发现TT的css hack,可能这个问题是搞不定了。

但说来说去,到底TT为什么会用ie7的内核而不是系统上的ie8的内核,哈哈,鬼知道。

补记:写这篇日志之后的若干星期,无意中在IE的“开发人员工具”里发现了一个浏览器模式设置,骇然有IE7可选,可见WIN7不仅有IE8内核,还有IE7的。CS兄又指教说:如果系统用的是IE8的话,那么无论什么傲游360TT搜狗之类的外壳浏览器统统都是用IE7模式渲染的,所以一般来说为了省事我都在正式发布页面时給meta加上一句强制让IE8也用IE7模式来渲染……这个方法真是个好办法,学习学习!!


分类: 技术文档 标签: bug, CSS, 腾讯TT

标签

315 360 ASP ASP.NET bug CentOS CSS CSS 3.0 CSS HACK Google Google图片搜索 Hadoop host文件 HTML5 ie6 IPV6 javascript JDK js osql photoshop php phpMyAdmin 中庸 主流 交易 人生 人类劣根 刷票 哲学 大学 感想 文学 文言文 期末 狂想 现代诗 琐事 科学 箴言 经济 网络安全 视频广告 诗歌 霸位

近期评论

  • 壮敏发表在《讨贼檄文》
  • 黄祺发表在《顿悟》
  • 西班牙超模发表在《致加西亚》
  • 西班牙超模发表在《致加西亚》
  • 糗事百科发表在《IE6 去除 input border》

Copyright © 2023 Tengs.

WordPress Theme by themehall.com

粤ICP备12053888号