WP笔记

Cufon中文字符无法识别的解决方案

Cufon官方并不支持中文,所以很多收费主题里带了Cufon字体,写了中文就不识别了nogoogle一番,发现很多人遇到同样的问题,归纳了一下解决方法,大致有如下几种。

Sola提示:

如果你的本来打算是去掉Cufon,可以看一看《如何禁用Cufon功能》。

方案一

方法一,使用中文字体的js文件,目前有一个做好的,是微软雅黑字体,中英文都支持的,只要使用这个字体就可以万无一失了,缺点是只有一种字体,不支持粗体、斜体等样式,看着比较单调。

使用时如下设置即可

Cufon.replace ('#id', {fontFamily: 'Microsoft YaHei'});

或者

Cufon.set('fontFamily', 'Microsoft YaHei');

Cufon.replace ('#id',{…});

微软雅黑字体下载

下载地址1(需登录本站):[download id=”9″]

下载地址2(站外下载):Microsoft Yahei

方案二

方法二,使用自助生成平台生成自己需要的中文字体,地址是http://www.cufon-font.com/generate/font_choice.php

单击选择一种字体,点击rendering it即可查看渲染后的字体效果,点击Get Cufon Js获得该字体的js代码,保存成js文件引用即可。注意,你的渲染结果里看到多少字符,你就能使用多少字符,里面没有的你是用不了的。对于英文,只需要26个英文字母和一些常用符号即可,字体文件体积比较小。中文则非常不同,你需要使用哪个汉字,就要将这个汉子的代码添加进去,如果将全部常用字加进去,代码体积会很大,例如方法一中的文件就有1m多

为了缩小体积,你可以仅仅生成你需要的汉子的代码,方法是在网页底下的“Input your letter for rendering”中填上你要渲染的汉字,选择一种字体,然后点击“Do it”按钮,就可以看到渲染结果,点击Get Cufon Js按钮获得js代码。

如果不知道该字体的名字,可以到你生成的字体文件中找Cufon.registerFont字样,在后面的大括号中"font-family"后面的就是字体的名称。

Cufon是一种很好的网页字体解决方案,希望能尽快找到一种中文字体替代的好方案

2011-09-30更新

用方法二做了其他的几款中文cufon字体,和大家分享下,包括常用的汉字和次常用的汉字,感觉字体生成的文件过大已经不适合网络应用了。

方正剪纸体下载:[download id=”11″]

楷体下载:[download id=”12″]

微软正黑下载:[download id=”13″]

行楷下载:[download id=”14″]

张海山锐线体-简下载:[download id=”15″]

效果如下图所示

几款中文cufon字体的效果图

更正 –  2011年11月7日

多谢morlin2011的提醒,自己做的cufon中文字体包不支持中英文混排,检查了一下,发现做字体包的时候忘了把空格加进去,不过这只会影响英文的word-spacing属性,对中文没影响。而中文字符重叠,据我猜测是因为生成字体的引擎默认按照英文来的,所以宽度窄了点,通过修改生成的js文件可以解决这个问题,如果简单的用letter-spacing就会使英文字符的间距也变大,而word-spacing属性对中文不好使,不能解决中文重叠问题。

重新编辑了一下字体js文件,适合中英文混排的字体打包和大家分享一下,字体包括:张海山锐线体-简、微软雅黑、楷体和方正剪纸体。

支持中英文混排三种字体打包下载

Note:文件仅供有兴趣的朋友研究,实际应用中请选择自己需要的文字做成字体包并启用gzip压缩,否则生成的文件过大,很占网速的。

网盘下载:支持中英文混排的cufon js文件下载

站内下载(需登录本站)

[download id=”17″]

下载后运行demo.html即可看到下图效果 

效果如下图所示:

支持中英文混排的cufon字体效果图

如何调整中文字间距

如何加大字体间距:

打开字体js文件,在开头可以找到如下代码:

Cufon.registerFont({"w":329,"face":…

修改“w”后面的数值(此处为329)即可改变字体间距。

如何修改空格的宽度:

如果对空格宽度不满意,也可以通过修改源文件改变空格的宽度,搜索如下代码:

"glyphs":{" ":{"w":87},

"w":87这个就是定义空格宽度的,修改这个数值直到自己满意为止。

如何手动向cufon的js文件里添加文字

如果把汉字写全了文件很大,所以最好只选择对自己有用的,如果想向已经生成的文件添加汉字或者符号,可以到http://www.cufon-font.com/generate/font_choice.php生成这个文字的代码,然后把这段代码拷贝的字体js文件即可,例如

添加符号“#”,生成的代码如下

"#":{"d":"19,-135r0,-23r52,0r14,-64r22,0r-13,64r64,0r13,-64r23,0r-13,64r30,0r0,23r-35,0r-11,56r46,0r0,23r-51,0r-13,63r-24,0r14,-63r-64,0r-14,63r-23,0r14,-63r-31,0r0,-23r36,0r11,-56r-47,0xm153,-135r-64,0r-12,56r65,0","w":218}

cufon的格式是

glyphs":{"符号 ":{属性},"符号 ":{属性},…

直接把这段代码找个地方插进去就可以了

支持中英文混排2种字体打包下载

话说剩下两个搞定了

文件下载:

Note:文件仅供有兴趣的朋友研究,实际应用中请选择自己需要的文字做成字体包并启用gzip压缩,否则生成的文件过大,很占网速的。

网盘下载:支持中英文混排的cufon js(华文行楷,微软正黑)

站内下载(需登录本站)

[download id=”18″]
 

效果图如下所示:

在线实例

CAUTION

谨慎使用!第一这些只是测试文件,第二要知道这些字体文件是非常大的,如果你的用户网速很有限,建议不要使用。

想测试加载速度可以点击在线实例

Use it wisely!

115条评论

  1. = =,抱歉,问个很白痴的问题,把那个JS文件上传到服务器之后,然后怎么用呢..今天刚安装 WordPress学习,下了个英文模板,发现汉化模板后不显示汉字…

    1. 你都找找你的模板是在哪里引入了cufon,在哪里初始化字体的
      有的是在header里引入cufon-yui.js,有的在functions.php里
      你需要找到这个脚本在哪里引入的,然后在此脚本后引入你的中文字体js文件
      再找到调用的代码Cufon.replace…
      把字体名称换成你的中文字体就行了
      如果不想用cufon,把调用代码删除就是了

      也可以去掉cufon换用网络字体,例如google 字体或者@font face之类的,这些只会渲染英文,对中文没影响,可选的英文字体样式也很多

  2. 动态生成中文cfon缓存起来就行了,但是字库要使用组合字体,大小无所谓,缓存的文件都不会太大的。

  3. 恩~剛剛發現Cufon離線安裝版有個特異功能~
    把安裝好的文件夾搬移到自己的網站下,
    就可以變成自己的Cufon線上版…..
    就是跟下面連結一樣的東西:
    http://cufon.shoqolate.com/generate/
    但是選項有幾個地方不太一樣….
    然後上傳任何ttf檔案都可以….(大小好像沒限制。)
    我有上傳微軟正黑體去轉看看,有回給我一個18M的js檔~
    可能被砍掉很多字符了吧…測都不想測就直接刪了js~

    這幾天這樣玩cufon下來的心得,Cufon的中文js只適合用在網站的導覽按鈕上,自己弄個字庫加些會用到的中文字,與英文js的大小沒啥差別~但是如果想包很多常用字進去的話…..很考驗網路頻寬還有電腦效能!

    對了~站長您包的字體包,微軟正黑體裡面沒有包到©這類符號的樣子。其他的字體我就沒看了!
    想必您是從font_choice.php來創建的~
    不知道您有注意到送字進去轉的時候,上面出現的missing字符列表嗎?
    這類的特殊字元,font_choice.php好像不接受~
    這也就是我跑去玩離線版的原因。

    有心得問題再來一起討論吧?^^

    1. You are brilliant!这几天没有时间研究Cufon,我是用font_choice.php做的,没有加©特殊符号,汉字是在网上找的常用字,所以可能不全。我也认为cufon中文只适合选自己需要的加到js里使用,如果把汉字加全了那文件肯定不适合网络应用了。我一般只把cufon用到标题上,整站都用的话开销太大。
      如果有专门针对中文的算法就好了,根据中文特点做一个体积小的js,哈哈。
      这个东西很有用,我也想玩玩,苦于现在没时间弄,如果有什么心得一定分享一下哦!

  4. 我有用High-Logic FontCreator…
    結論是:太複雜了!
    最大的致命傷:沒辦法軟體內直接搜尋中文字符,
    還必須先去找到那個字符的UNICODE碼,然後才能在
    軟體內搜尋到那個中文字符….
    幾萬個中文字符…..光找字就先死人了!

  5. 我用的是Git版~
    直接抓下來的,還要安裝FontForge
    https://github.com/sorccu/cufon/wiki/faq#wiki-faq-6

    不太可能丟一個完整的中文TTF直接轉成js啊~頻寬會死人的!
    所以要編輯一個自己的TTF字庫。
    譬如2500常用字集,有點勉強了。
    3500我覺得還是太大~太吃頻寬~

    1. 你太厉害了,追根究底的研究。我以为本地运行就不怕字多,看来这是个美好的愿望啊。你知道怎么编辑TTF字库吗?我觉得一部分一部分的转换,然后合并js文件也是个方法。不过话说2500个汉字生成的js文件也相当大了,碰上网速慢的受得了么。

  6. 剛在我的LINUX上裝了CUFON 離線版~
    還真的可以把ttf直接轉js了….
    可是那個ttf要怎麼搞啊?
    LOL

    1. 你是在这里(https://github.com/sorccu/cufon)下载源代码编译的吗,看起来很有趣,等我有空在虚拟机上装linux试试,你说什么ttf搞不定?

  7. 用GoogleChrome會快很多。
    但是後續的編輯&轉存txt,整個大LAG~
    後來我就用Acrobat先存成PDF在慢慢轉存txt,
    會比較順暢些。

  8. (http://cufon.shoqolate.com/generate/)
    這裡我一樣沒法上傳中文字體~可以傳完但不給生成。

    參數指的是從
    http://www.cufon-font.com/generate/font_choice.php
    搞出來的js裡的控制數值。

    我有試著手動添加3500個常用字體….
    我的Firefox接近崩潰邊緣,當然也沒成功 TT

    1. 我的firefox装东西多貌似比别的浏览器更容易崩溃,我也是用这个做的,添加了3499个汉字,有那么一两次崩溃了,多试了几次还是可以转的。不过我昨天发现居然把“嘻”字落下了,还好不用重新生成文件,只要生成“嘻”字的代码,然后插入到js文件里就能用。

  9. 恩~看來是Cufon 的產生字體網站有點問題了!
    我是找不到根源直接去問模板作者,
    他又丟http://www.tingcheba.com/cufon-chinese 給我
    要我試試加上separate:’characters’。
    那網站我昨晚就試過了~沒用!然後突然看到裡頭有”正常”的FONT FILE!
    那就來實驗比對看看吧~賓果!
    原來問題出在FONT FILE裡的參數~
    晚上可以睡好了!
    也感謝你的幫忙。

    1. 你说的FONT FILE参数是指的cufon官网的生成器吗(http://cufon.shoqolate.com/generate/)

      我的字体文件是用http://www.cufon-font.com/generate/font_choice.php生成的,以前试过用官网,但对文件大小有限制,中文字体包太大了,上传不了。

      我做的字体包汉字可能不全,第一次做没经验,不知道还有啥问题呢

    1. 空格问题是我一开始发现的呵呵,u这个是我折腾空格的时候偶然发现,貌似折腾一通知道cufon 的js结构具体啥样了

    1. 是的,我当时试验了这个,别的都没问题,就是字母u不对,所以这个字体就没搞定,除了这个字体和华文行楷,别的我都搞定了
      我尝试给字母u加了宽度,似乎能修正

    2. 貌似加宽度可以,
      “u”:{“d”:”105,-20v71,-2,50,-103,53,-174r29,0r0,194r-29,0v-1,-10,2,-23,-1,-31v-32,62,-129,43,-129,-47r0,-116r29,0v4,66,-20,176,48,174″}
      替换成
      “u”:{“d”:”105,-20v71,-2,50,-103,53,-174r29,0r0,194r-29,0v-1,-10,2,-23,-1,-31v-32,62,-129,43,-129,-47r0,-116r29,0v4,66,-20,176,48,174″,”w”:190}
      不知道还会不会有其它问题,继续测试

    3. 还有,我做的字体包里少了空格,所以如果你输入cufon test之类带空格的英文,就会变成cufontest,需要把空格补上,还好可以直接在代码里加
      在”glyphs”:{ 后面加上这句就行
      ” “:{“w”:106},
      106是空格的宽度,可以根据自己需要调整

  10. 剛剛又測試了一下==”有去加字~
    最好是”glyphs”前面的全部替換,除了
    “Font-family”
    &
    “unicode-range”

    1. Hi,真是好久不见,你一评论我就发现嵌套评论的缺点了,找不到回复按钮了,哈哈,看来得整个@通知的功能。
      Cufon似乎是解决中文字体的方法,英文的话,感觉cufon要死了,现在很多收费字体已经宣布支持@fontface,感觉@fontface已经取代了cufon。
      我现在用cufon非常少了,哈哈,你的离线版很牛,确实比在线版好很多,可是我还没安装~~囧
      每次都说等有时间了,结果时间都不知道哪里去了,你分享个教程啥的,我来个快速安装

        1. 评论太多没开分页的结果吧,呵呵,我别的文章评论都不多,所以不想开分页,这篇文章的评论看着眼花缭乱了,改天我处理一下

  11. 我想應該找到問題點了….
    無意間看到 http://www.tingcheba.com/cufon-chinese
    裡面有個Microsoft YaHei 文件,測試後沒字距問題。
    索性就把自己從CUFON產生的字型檔(微軟正黑體)裡面”glyphs”之前的,全替換成Microsoft YaHei里的參數(更換字型名稱)。
    居然就正常了~之後一個一個參數替換看看…..

    結論就是把BBOX的參數改成
    “bbox”:”-38 -307 356 92.0766″
    就OK正常嚕~

    1. 微软雅黑那个确实没问题,我的微软雅黑下载也是在网上找到的,这个不知道是很么人做的,不过用http://www.cufon-font.com/generate/font_choice.php生成的cufon字体就会有重叠的问题,不知道 那个微软雅黑是不是处理过

    2. 试验了一下只替换bbox为-36 -307 362 92,似乎没有效果,我想不是bbox的问题,而是微软雅黑的开头是Cufon.registerFont({“w”:209
      而正黑的开头是Cufon.registerFont({“w”:360
      由于宽度从209变成了360,所以中文字符不重叠了,但是我测试的时候发现英文字母u(xiaoxie)间距变大了,不知道是什么问题

  12. 感謝回覆~
    這個方式是可以把中文字距調開了,但是英數字距卻變大了。
    表示無法中英混用了==” Orz

    1. 感谢你的回复,原来没有意识到中英文混用的问题,这一看发现了不少事。总之,我做了能中英文混排的,不过有两种字体没搞定,搞定的我发上来了,如果感兴趣可以看看我今天的更新。
      这次的字体包不会重叠,不需要letter-spacing。

  13. 我也是遇到中文字都疊在一起的問題了,可以詳述一下解決方式嗎?感謝!

    1. 找到解決方式了~
      Cufon.replace(‘h1′) 改为 Cufon.replace(‘h1′,{separate:’characters’}) 就行了。

      也就是加上{separate:’characters’}
      就完全正常了>

    2. 假设给h1应用cufon字体,添加如下样式
      h1 {letter-spacing:10px}
      letter-spacing定义字符间距,如果字符重叠,就将这个间距加大,在写样式的时候注意一下css的继承和优先级,保证这个样式不被覆盖即可

    1. css问题,中文cufon字符需要的间距比英文的大,所以你需要用firebug找到定义字符间距的样式,然后加大margin

评论已关闭。