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

Sola提示:

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

方案一

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

使用时如下设置即可

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

或者

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

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

微软雅黑字体下载

下载地址1(需登录本站):Microsoft YaHei 已下载 1548 次

下载地址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字体,和大家分享下,包括常用的汉字和次常用的汉字,感觉字体生成的文件过大已经不适合网络应用了。

方正剪纸体下载:方正剪纸体 已下载 109 次

楷体下载:楷体GB2312 已下载 73 次

微软正黑下载:微软正黑 已下载 174 次

行楷下载:行楷 已下载 65 次

张海山锐线体-简下载:张海山锐线体-简 已下载 85 次

效果如下图所示

几款中文cufon字体的效果图

更正 –  2011年11月7日

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

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

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

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

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

站内下载(需登录本站)

支持中英文混排的cufon js文件下载 已下载 614 次

下载后运行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(华文行楷,微软正黑)

站内下载(需登录本站)

支持中英文混排的cufon js(华文行楷,微软正黑)文件下载 已下载 646 次
 

效果图如下所示:

在线实例

CAUTION

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

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

Use it wisely!

115条留言

  1. 想问下你的微软雅黑JS是用什么工具生成?

    1. 不知道,那个微软雅黑是很久以前在网上找到的,到底是谁发布的都闹不清楚,更别说用什么工具做的了。

  2. 在松松博客导航看到你的网站,友链嘛?www.cacaoa.us

    1. 很感谢你的关注,不过我目前只想和技术类的博客交换友链,如果有这类博客随时欢迎

  3. 剛剛去看了一下離線版那個輸入自選字的欄位,原來是被設定成只能輸入250個字,難怪我會覺得怪怪的….總是有缺字…哈哈!
    改成1500之後就OK了!

    不用去搞FontCreator了,剛剛弄了自己的1200字含標點符號JS大小約550K。

    接下來研究看看怎麼把Cufon寫進新THEME裡的CSS裡了…
    一陣子沒玩,都要到處找資料…

    1. 厉害,难题都解决了,写进主题肯定很快的。

    2. 找到All-In-One Cufón plugin for WP, 不管是啥主題都直接套用了。
      只要搞懂CSS裡的h1,h2,是啥就好…

      但是…總覺得顯示出來的字體效果不夠銳利,像是被PS點陣化了…
      是因為今年我的螢幕換了一台解析度變高了的關係嗎?

      PS:小聲說,FontCrator可以把一些字庫裡的OOXX移除掉……

      晚點換去研究看看FONFACE…

      1. All-In-One Cufon,这儿我还没用过呢,看起来很方便。

        我觉得ps点阵化应该跟这插件没关系,cufon字体显示小了都不清楚,你还整个高分辨率的显示器。

        我看你要成字体专家了:)

        1. Cufon.replace(‘h1’, {textshadow: ‘0.1em 0.1em 0.2em black’});

          加上SHADOW會清楚一點。

          @Font-face,放棄….比Cufon還難搞.

          1. 不会吧,@fontface和google font一个意思,用着很简单啊,直接用font-family:’字体名’就行了啊

          2. 不不不~
            我的意思是說讓@fontface也可以支援中文字體。
            如果fontface也有像CUFON一樣可以沒問題生成字體的網站就好。

            但是目前看來只有一個網站有提供,但是好像有上傳大小限制。
            意思就是一般中文使用者只能建立小小的中文字庫….

            目前還沒發現離線版的@FONTFACE

          3. 哦?哪个网站能生成中文fontface,发给我看看呗

          4. http://www.fontsquirrel.com

            看到的方式是要先用fontCratory建立自己的字庫,
            否則肥大的中文字庫是丟不上去的。

            所以….我也沒試過…

          5. 啊,这个就是我用的那个,不过我试的时候没有大小限制,我上传了一个中文字体上去,传是传上去了,可点转换的时候就报错了。不过这都半年前的事了,不知道这期间发生了多少变化

  4. 我下了微软雅黑,但仍然不行,我的wp模板里有“Cufon”这个选项的。但是我上传字体文件到这个模板的字体文件夹内后刷新页面却无法找到这个选择。

    1. 这个是你主题的问题,与cufon字体文件无关,你需要知道你的主题调用字体文件的机制。最好告知是什么主题

  5. […] Cufon使设计师不用担心用户电脑上没有安装自己使用的字体,令网页更加吸引眼球。但Cufon有一定的局限性,首先Cufon必须有Javascript的支持,禁用Javascript的浏览器看不到任何效果。其次,对国人来说,Cufon不支持中文是一大麻烦,所以很多使用国外主题的朋友会选择将Cufon剔除。既然对中文支持不好,如果可以只渲染英文、不处理中文的话,或许是个不错的方法。这里就有了一种CUFON的替代方案——@FONT FACE。 […]

  6. 博主, 你写的那篇@cufon 替代这个cufon的用法不是很明白,只要修改你文章里贴出的两段代码到style.css文件里,然后修改字体名字,放入style.css同文件夹里就可以了吗,但是我这样做不能显示。

    1. 不是的,还要添加cufon中文字体文件,但中文字体文件比较大,如果你只是想英文字体漂亮,中文就用默认的,建议用Google Font或者@fontface替代Cufon。如果你有什么需要帮助的可以加我的QQ:282914290

    2. 我终于明白你说的意思了,@FONTFACE的使用方法和Google Font类似,只不过@FONTFACE的字体文件要放在自己网站。

      以实用Google Font为例,在主题的style.css开头写上
      @import url(http://fonts.googleapis.com/css?family=Chau+Philomene+One);

      然后为元素应用字体,例如h1
      h1 { font-family: ‘Chau Philomene One’, sans-serif;}

      import一定要写在所有样式之前

      1. 嗯,还是不行,填写了你告诉我的GOOGLE FONTS代码在style.css 里,设置字体为标题1,还是不能显示GOOGLE FONTS字体。你的Q 我加不上。

    1. 没有啊,只是用别人的东西生成了一些字体

  7. 希望能增加文泉驿微米黑,这个是开源的漂亮字体

    1. 多谢建议,我还不知道这款字体,有空一定研究下

    1. 放主题目录下就行吧,只要引用js的时候路径没错就行了

  8. […] Cufon不支持中文,虽然可以通过引入中文cufon字体解决,但中文字体库庞大,对网速吃紧的用户是一大考验,所以我们可以考虑禁用Cufon功能。 […]

  9. 现在比较大的问题是标点符号,我试用了你的字体,标点符号全都不见了 :roll:

    1. 显示不出来就说明字体文件里没有,只能生成这些符号的代码,然后加到js文件里,你需要什么符号就加什么符号,你可以参考文章中的“如何手动向cufon的js文件里添加文字”

      1. 试了一下,的确是不支持rendering标点符号

        1. 你用的是中文标点吗,中文标点确实不怎么支持

          1. 期待你帮大家解决中文标点符号的问题 [呵呵]

          2. 抬举我了,这估计不是我能解决的,而且中文字那么多,如果用cufon替换整个页面的中文, 难免不会少点东西,有的汉字可能没有

          3. HIHI~
            好久不見啊!這陣子有空回來弄弄網頁的東西,一樣又轉到了Cufon的中文上頭,回頭看看半年多前在這裡留下的筆記。

            恩….缺中文標點符號的問題可能在於那個官網提供的字庫是有問題的。或是伺服器端PHP&FontForge的設置…都有可能啦。

            剛剛隨便抓了一個叫STHeiti-Light.ttc的字體,拆成ttf後,丟到離線版Cufon, 勾選All, 生成了一個19Mb的JS,中文標點符號是正常的。

            小弟這幾天回頭把玩的結論,目前最安全但是也最費時的做法就是:
            使用FontCreator建立自己的字庫,然後丟到離線版Cufon抓取ALL,用網頁選字的方式好像也會有問題。

            剛剛弄好自己的字庫清單,恩….一千字左右….打開FontCreator…
            我呆住了…這樣一個一個查詢UNICODE然後剪下貼上….要花我多少時間啊!!!!!!Orz.

  10. 调用没有用的原因很多,例如没有正确引入jquery,重复引入jquery,引入jquery和cufon的顺序不对,或者有其它的js错误。如果没有具体主题,我没法告诉你调用为什么不行。

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

    也可以去掉cufon换用网络字体,例如google 字体或者@font face之类的,这些只会渲染英文,对中文没影响,可选的英文字体样式也很多
    ————————————
    按照你的方法,在WP英文模板中,好像不行,具体是什么问题呢,请教~!

    1. 我说的只是方法,还得看你具体是怎么做的,你用的什么主题,如果是免费主题的话告诉我是哪个我帮你看看。

      1. functions也修改了 Cufon.replace (‘#id’, {fontFamily: ‘Microsoft YaHei’}); 调用没有用

评论功能已关闭