分类: 技术

  • 为什么英文站改成汉语就不显示(解决cufon.js)

    起因:上周,朋友发过来一个website说里面的2.html显示不出来汉字,改好就显示不出来字体。

    然后今天在w3cfuns群暴风雨问为什么改好的汉字显示不出来,有好多人在说可能是编码问题。之前我遇见过一次,查找到问题是cufon啊~故整理一下,这样的问题有的时候会使人很纠结的~

     

    原理:文件中调用的cufon对于英文特殊字体进行了渲染,对于汉字水土不服导致汉字显示不出来。或者超级慢。

    解决方法:

    <!–<script src=”js/cufon-yui.js” type=”text/javascript”></script>
    <script src=”js/Liberation_Sans.font.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
    Cufon.replace(‘span’);
    Cufon.replace(‘li’);
    Cufon.replace(‘h1’);
    Cufon.replace(‘p’);
    </script>–>

    或者js内部的调用

    $.include(‘js/cufon-yui.js’)
    $.include(‘js/cufon-replace.js’)
    $.include(‘js/Droid_Serif_5F400.font.js’)
    $.include(‘js/Droid_Serif_italic_5F400.font.js’)

    的问题。

    好了上面的看清楚了么,哈哈看清楚了就把他们注释掉。

    ok,解决了。

     

    简单说就是你直接搜索cufon带有这个关键字的调用(不论是网页头部的调用还是js内部的调用)都去掉就好了。

     

    相关的解释:请参考cufon-yui.js框架以及cufon百科。

    cufon-yui.js 渲染特殊字体的,跟外部调用特殊字体有关系。一般国内的特殊字体解决用图片做好上传的。

     

    Cufon是一个用来替代 sIFR 框架,作为一种基于 JavaScript 的网页字体引入方案, Cufon的核心功能是通过一个名为“cufon-yui.js” 的 JavaScript 类库,提供给开发人员的。在web开发中,经常面对的一种“冲突”,即“字体(Font Family)冲突”。

    通常的这一冲突总是爆发于 Web 页面的设计者(Designer)和开发者(Coder)之间。在很多场合下,Web 页面的设计者都会倾向于在他们的页面设计稿中,为文字附加使用一些“特殊”的字体和特效,以此来展示他们卓越的设计能力。比如设计一个公司的Logo,图片上的一些特殊字体是从ps字库中调出的,当然这些文字在图片上显示肯定是没有问题的,但是如果要在网页中用文本来显示这些效果,就是会让开发人员抓狂了,因为浏览器并不支持所有的字体,这种情况Cufon就会大显身手了。

    Cufon 技术的实现策略其实就是以一定标准,在网页相关位置上“画”出了所需要显示的文字字符,并同时替换原先区域所需要显示的文字。

    借助于浏览器所推出的专有页面绘画方案,如 VML、Canvas 和 SVG 等,来进行页面的绘画。

    Cufon字体文件,就是按照 Cufon 所提出的字体描述标准,创建形成的一种字体文件。

    [ Cufon generate ]注:英文网站,Cufon字体在线生成工具,网站上传大小有限制,且国外上传速度慢,制作中文字体的有困难;

    [微软雅黑下载]推荐:Cufon字体,可以自己选择合适的汉字,最小化您的JS文件!

    [Cufon中文字体博客]一些疑问,Cufon字体使用交流!

    Tip:建议您最小化选择您的字母字符的范围,以缩小js文件的大小。

     

    相关资料 http://www.cufon-font.com/

    我是友情小链接,汉字特殊字体如何不用图片,直接用文字显示

  • 字体-字体前面的O、T含义

    字体种类

    1.光栅字体(.FON)

    光栅字体(Raster Font)是针对特定的显示分辨率以不同大小存储的位图,用于Windows系统中屏幕上的菜单、按钮等处文字的显示。它并不是以矢量描述的,放大以后会出现锯齿,只适合屏幕描述。不过它的显示速度非常快,所以作为系统字体而在Windows中使用。

    2.矢量字体

    矢量字体(Vector font)中每一个字形是通过数学曲线来描述的,它包含了字形边界上的关键点,连线的导数信息等,字体的渲染引擎通过读取这些数学矢量,然后进行一定的数学运算来进行渲染。这类字体的优点是字体实际尺寸可以任意缩放而不变形、变色。

    矢量字体主要包括 Type1 、 TrueType、OpenType等几类。 矢量字体又叫Outline font(轮廓字体),通常使用贝塞尔曲线,绘图指令和数学公式进行绘制。这样可以在对字体进行任意缩放的时候保持字体边缘依然光滑,字体色素不会丢失。

     

    1.PostScript字体(.PFM) 这种字体基于另一种矢量语言(Adobe PostScript)的描述,常用于PostScript打印机中,不过Windows并不直接支持这类字体,要在Windows使用这类字体需要安装”Adobe Type Manger”(ATM)软件来进行协调。

    2.TrueType字体(.TTF) 这是我们日常操作中接触得最多的一种类型的字体,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

    3.OpenType字体(.TTC) OpenType,是一种可缩放字型(scalable font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf,类型代码是OTTO,现行标准为OpenType 1.4。

    OpenType最初发表于1996年,并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型,TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。到2005年大概有一万多种OpenType字体,Adobe产品占了三分之一。

    西文常见字体 

    1、Arial   2、Times New Roman   3、Courier New   4、Book Antiqua   5、Impact   6、Helvetica

  • 鼠标形状

    • 空间


    鼠标形状,今天突然想到老早以前的QQ空间用得一些花里胡哨的鼠标挂件什么的。主要吧,起因是因为百度空间也改版了,导致我家的绿球没了 我表示很悲痛,不过我相信经过测试后,百度应该还会把绿球还给我的。各种鼠标形状。那种挂件的使用图片,动态的就使用gif的。不知道能不能使用flash插入后做挂件。理论上应该可以的。

    源码:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>Untitled Document</title>
    <style type=”text/css”>
    <!–
    span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}
    –>
    </style>

    </head>
    <script type=”text/javascript”>
    document.onmousemove=function(e){
    var e=e?e:window.event;
    var posx=e.clientX;
    var posy=e.clientY;
    document.images[0].style.left=posx+”px”;
    document.images[0].style.top=posy+”px”;
    }
    </script>
    <body>
    <img src=”image/ProfileIconDouban.png” style=”position:absolute;z-index:10000;margin-left:20px;”>
    <div style=” background:#000; width:100%; height:100%; display:block”><br />
    <br />
    <br />
    <br />
    nihao
    <span style=”cursor:pointer;”>pointer 手型</span>
    <span style=”cursor:crosshair;”>crosshair 十字</span>
    <span style=”cursor:text;”>text 文本</span>
    <span style=”cursor:wait;”>wait 等待</span>
    <span style=”cursor:help;”>help 问号</span>
    <span style=”cursor:e-resize;”>e-resize 右的箭头</span>
    <span style=”cursor:ne-resize;”>ne-resize 右上的箭头</span>
    <span style=”cursor:n-resize;”>n-resize 上的箭头</span>
    <span style=”cursor:nw-resize;”>nw-resize 左上的箭头</span>
    <span style=”cursor:w-resize;”>w-resize 左的箭头</span>
    <span style=”cursor:sw-resize;”>sw-resize 左下的箭头</span>
    <span style=”cursor:s-resize;”>s-resize 下的箭头</span>
    <span style=”cursor:se-resize;”>se-resize 右下的箭头</span>
    <span style=”cursor:move;”>move 移动</span></div>
    </body>
    </html>

  • 解决IE6不支持hover的方法

    第一种解决方案(推荐)

    IE6以及更低版本的浏览器对“:hover”的支持不理想,对于类似的“p:hover”、“img:hover”、“#header:hover”…,今天给大家介绍一种新的方法,可以完美解决IE6不支持hover的情况,用法很简单,将下载后的“csshover.htc”文件,定义在body样式内。

    body{behavior:url(“csshover.htc”);}

    htc文件

    第二种解决方案

    下面这段代码要放到页面的底部在 前:

    http://www.w3cfuns.com/forum.php?mod=viewthread&tid=347&fromuid=7146     原文

    昨天写得小例子不兼容就找到的解决方案,特转载一下。

  • 从管理一个QQ群学到的东西-谢谢boahy

    原来最后的比拼不是你如何的努力,而是你自己的不掉队,能自制,能坚持。

    最后的胜利只有俩因素,因为都是强者的对比,和成熟规则的应用。没有可发掘的时候你做到的有三条,可以取胜

    1、等待对方犯错

    2、坚持自己不犯错

    3、你的运气挺好

    反而越小的时候 你的努力反而越见成效。

    你上了好大学,你上了好本科,你学会了好英语,你有好爸妈等等等等。这些小时候都很见成效,差距会非常的明显,但是到了大的时候拼得就是不犯错。拼得就是坚持,就是等待对方犯错。

  • 微博账号

    账号管理:

    http://www.kmsocial.cn/
    可以同时管理5个账号

    加粉:
    http://lvfoluo.com/lvfoluo/index.html
    这个可以同时加一百个粉丝,根据一些热门的账号去粉他们的新粉丝 这样互粉率就很高

    http://www.wbto.cn/
    这个可以同时十几个账号加一个粉丝

    内容库:
    http://wei.ci123.com/
    http://weibo.pp.cc/time/ 

  • 浏览器

    有时候我们在制作网页的时候,会遇到不同浏览器,对填充和边距显示的不同效果。导致心情纳闷
    现在提供解决这个困扰的方法!

    对FF、Opear等支持Web标准的浏览器与比较顽固的IE浏览器进行针对性的CSS hack

    /*FF、Opear等支持Web标准的浏览器*/
    #header {
    margin-top: 23px;
    margin-bottom: 23px;
    }
    /*IE6浏览器*/
    *html #header {
    margin-top: 13px;
    margin-bottom: 13px;
    }
    /*IE7浏览器*/
    *+html #header {
    margin-top: 18px;
    margin-bottom: 18px;
    }

    因此,当你在遇到这种情况的时候可以用
    * html 来定义IE6
    *+html 来定义IE7

    更新:
    还有一种css hack直接与其他浏览器一起写在一条css表达式中

    #header{
    margin-top: 13px; /* 所有浏览器都支持 */
    margin-top: 13px !important; /* Firefox、IE7支持 */
    _margin-top: 13px; /* IE6支持 */
    *margin-top: 13px; /* IE6、IE7支持 */
    +margin-top: 13px; /* IE7支持 */
    margin-top: 13px\9; /* IE6、IE7、IE8、IE9支持 */
    margin-top: 13px\0; /* IE8、IE9支持 */
    }

    需要注意书写顺序:所有浏览器、Firefox、IE8、IE7、IE6依次排列。

  • 提示ie6浏览器升级-简介代码

    今天写页面的时候,用了个一个比较炫的banne切换,看了下IE6下,透明问题又要使用js调用写兼容css,应该大力普及I6+以上才可以了。让html5之风狂烈的吹过来吧,毕竟好的网速是可以承载肆意的效果了。据说html5 在2014年会普及,其实现在 淘宝 腾讯 轻博客 花瓣网 美丽说 点点神马神马的也都在用了。试水性的成功啊~ 浏览器神马的急速的升级啊升级吧。

    直接一个简单的图片提示加个下载地址连接即可。



    无标题文档
    绝对顶部居中

    某某提醒您,IE浏览器版本过低。免费升级


    把上面的一段代码放在head里面即可。

    0

  • html中的 ul ol li 与dd dt dl

    ul: unordered lists
    ol: ordered lists
    li: Lists

    ol 有序列表。

    1. ……
    2. ……
    3. ……

      表现为:

    1……
    2……
    3……
      ul 无序列表,表现为li前面是大圆点而不是123

    • ……
    • ……

      很多人容易忽略 dl dt dd的用法

      

    dl 内容块
      dt 内容块的标题
      dd 内容
      可以这么写:

    标题
    内容1
    内容2

      dt 和dd中可以再加入 ol ul li和p
      理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

    LI代码的格式化:

    A).运用CSS格式化列表符:

    以下是引用片段:
    ul li{
    list-style-type:none;
    }

    B).如果你想将列表符换成图像,则:

    以下是引用片段:
    ul li{
    list-style-type:none;
    list-style-image: url(/blog/images/icon.gif);
    }

    C).为了左对齐,可以用如下代码:

    以下是引用片段:
    ul{
    list-style-type:none;
    margin:0px;
    }

    D).如果想给列表加背景色,可以用如下代码:

    以下是引用片段:
    ul{
    list-style-type: none;
    margin:0px;
    }
    ul li{
    background:#CCC;
    }

    E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

    以下是引用片段:
    ul{ list-style-type: none; margin:0px; }
    ul li a{ display:block; width: 100%; background:#ccc; }
    ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

    F).LI中的元素水平排列,关键FLOAT:LEFT:

    以下是引用片段:
    ul{
    list-style-type:none;
    width:100%;
    }
    ul li{
    width:80px;
    float:left;
    }

    • 的区别

    • 的参数设定(常用):

      例如:

    • type=”square”

      只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type=”disc”:

      以下是引用片段:
      符号 是当 type=”disc” 时的列项符号。
      符号 if” width=10 height=10 border=0> 是当 type=”circle” 时的列项符号。
      符号 是当 type=”square” 时的列项符号。
      value=”4″

      只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。

        称为无序清单标记。

        所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。

          的参数设定(常用):

          例如:

            type=”square”

            设定符号款式,其值有三种,如下,内定为 type=”disc”:

            以下是引用片段:
            符号 是当 type=”disc” 时的列项符号。
            符号 是当 type=”circle” 时的列项符号。
            符号 是当 type=”square” 时的列项符号。

              是项目列表,

            • 是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是
                这个是编号列表,用数字来列的,也是用

              1. 做列表项
              2. 是 list item 即列表项,但列表有很两种,所以外面得有
                  或者

                    用来区别无序列表(小点点)和有序列表(1,2,3…)。

  • focus

    focus

    not focus

    。。。。。。

    一个捕鱼晒太阳的故事。

    宇智波鼬与宇智波佐助,跟猜测一样。

    影片、剧本的猜测异乎寻常。然? focus,not focus??????????

    一周的禁止。

    随记。

    捕鱼晒太阳,捕鱼晒太阳,循环往复,周而复始。还是怎样呢,回归后的捕鱼晒太阳。两种不同的方式耶。

    因为挣扎所以升腾

    因为抱怨所以思考

    因为经历所以淡然

    之前的呢,

    升腾-无目的

    思考-无想法

    淡然-无阅历。

    按照划好的弧线 step by step。然???

    总想有几步踏出线外,会怎样???

    QQ真是个强大的存在,查找人,竟然2年前的还会有认识的可能

    事情太少了缘故么

    也许是因为昨晚看小说,无自律的愧疚