CSS3 关于@font-face引用中文字体解决办法

有两种方法,一种简单的,一种比较复杂,都可以实现(注:这里的方法只适合使用少量的中文字体,如果使用的字量过大,请使用其他方法解决)

第一种:简单的

  1.下载需要的中文字体的.ttf格式,这个都不难找到,百度上一搜一大片,都可以下载到。

  2.下载fontforge软件,这个软件可以编辑字体,字体文件内存一般都比较大,直接使用会导致网速加载速度变慢,使用这个字体编辑软件的目的就是将需要的字体提取出来,可以解决字体内存变小,从而不影响加载速度。

  3.打开AI,写一个自己需要的文字,如图,我这里使用的方正姚体,将写好的字体转化成轮廓(在字体上单机右键—>创建轮廓),然后将文字保存成.svg格式。

  

  4.打开下载好的fontforge软件,新建一个新的空白字体文件,查看过@font-face引用字体源文件的同学应该知道,字体或者icon在代码中引用都是用符号代替的,也就是这边字体符号,新建的字体文件中建议从A开始做字体,这样方便后期代码中书写,双击A下面的框,弹出一个字体编辑窗口,点击File—>Import,导入刚才用AI保存的.svg格式文件,导入字体。(注:选择导入字体类型)

  

导入字体成功

如上方法将需要的字体全部导入后保存成.ttf格式(点击File—>Generate Fonts)。(注:1.这里要保存成.ttf格式,如下图;2.编辑好的字体建议截图保存,方便后期文字修改查找所对应的字符)

编辑字体的工作到这里就结束了。

  5.使用fontsquirrel在线转换软件将.ttf格式转换成需要的格式.eot .woff .svg .ttf等页面中所需要的格式。(注:fontsquirrel在线转换软件网址:http://www.fontsquirrel.com/tools/webfont-generator),转换完成保存压缩包到需要的文件下,这里文件包会自动生成一个stylesheet.css文件,文件中已经将字体引用好了,直接使用即可。

  

第二种:复杂的

  1.将下载好的.ttf文件用fontforge字体编辑软件打开,在fontforge中新建一个空白字体文件,将打开的.ttf中所需要的文字双击打开编辑窗口,点击File—>Export将字体导出成.svg格式。在空白字体文件中,双击A下面的框,弹出字体编辑窗口,点击File—>Import将字体导入的文件中,在这里寻找自己需要的文字可能会费大量的时间。(注:这里不能从.ttf文件中直接拷贝字体到新建空白字体文件中,这样字体会变小,建议先导出,再导入)。

  2.如上方法,将需要的字体重新编排在新建的文件中再保存成.ttf格式,会使字体文件的内存变小,方便使用。

  3..ttf字体文件转换其他格式的方法请查看第一种方法步骤5。

两种方法都可以实现中文字体转换,使用@font-face方法和英文字体引用方式一样。

时间: 2024-10-14 06:34:39

CSS3 关于@font-face引用中文字体解决办法的相关文章

mac系统下为emacs设置中文字体,解决乱码问题

最近换了个系统,现在用mac系统. 当打开emacs后,中文支持的不是很好.有的地方能显示,在.el文件的注释里显示为口口口口口口口口这样的框,如下图所示 找了半天,是因为中文字体的问题,只要设置好中文字体就行了. 以前在Linux下中文就支持的很好,不用配制中文字体就能显示. 配制代码如下(将其放到.emacs文件或init.el里就OK): ;; -------------------------------------------------------------------------

PHP中文乱码解决办法

一.         首先是PHP网页的编码 1.     php文件本身的编码与网页的编码应匹配 a.     如果欲使用gb2312编码,那么php要输出头:header("Content-Type: text/html; charset=gb2312"),静态页面添加<meta http-equiv="Content-Type" content="text/html; charset=gb2312">,所有文件的编码格式为ANS

几个常用的CSS3样式代码以及不兼容的解决办法

原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 1 CSS3代码: 2 3 -webkit-border-radius:10px; 4 -moz-border-radius:10px; 5 border-radius:10px; 6 background-color:#666; 7 width:200px;height:100px; Firefox,Chrome Google,Safari等浏览器的显示效果如图0-0: 图0-0 但是IE这个异类不支

navicat for mysql 显示中文乱码解决办法

navicat for mysql 显示中文乱码解决办法   最近遇到一个问题,用navicat for mysql 打开数据库时全都显示的是乱码(在用程序代码插入数据之前确保字符不是乱码),遇到问题就的寻求解决之道,百度了好长时间也没解决,网上那些解决办法都不 适合我的问题,网上的大多数解决方法是在navicat里右击一个连接,选择连接属性,切换到高级选项卡,去掉“使用mysql字符集”前的对勾,在编码 里选择utf-8,这种方法对于部分问题可能适合,但是我的乱码问题依然存在,于是乎我又将ut

QQ打不出中文的解决办法

先把语言栏关了,再开始---运行,运行ctfmon就好了QQ打不出中文的解决办法

mysql like 匹配查询出不正确中文的解决办法

本文讲述mysql使用like语句时,匹配查询出不正确中文的解决办法 mysql like 搜索的时候发现,用 select title from tb_name where title like '%a%' 的时候出来的结果除了包含a的名字外连包含中文“新”的名字也出现在搜索结果里面,这令我想弄清楚mysql的匹配模式和规则到底是怎么样的,另外在匹配的时候正则表达式也很常用! 出现这个问题的原因是:MySQL在查询字符串时是大小写不敏感的,在编绎MySQL时一般以ISO-8859字符集作为默认

PHP Json函数不能处理中文的解决办法

PHP5.2 新增的 json 功能是非常受欢迎的,但是经过测试发现,json_encode对中文的处理是有问题的:    不能处理GB编码,所有的GB编码都会替换成空字符:    utf8编码的中文被编码成unicode编码,相当于javascript的escape函数处理的结果.    为了能正确使用json,首先我们就应该在编码上采用utf8编码,然后再对json_encode的返回结果稍加处理就可以得到正确的结果了.?1. [代码]php代码    <?php/*PHP5.2 新增的 j

Oracle导入中文乱码解决办法

Oracle导入中文乱码解决办法 一.确保各个客户端字符集的编码同服务器字符集编码一致 1-       确定sqlplus字符集编码,如果是windows设置环境变量. 2-       确保SecureCRT客户端的字符集为简体中文即可,不要设置为UTF-8,否则在连接oralce数据库时,中文都显示乱码,以免产生不必要的麻烦. 二.设置带中文的sql脚本的字符集

【转】sublime text 2 中文乱码解决办法

sublime text 2是一款非常优秀的跨平台文本及源代码编辑器,本人非常喜欢,但是不支持GB2312和GBK编码在某些时候比较麻烦.可以通过向sublime text 中添加编码类型转换包(比如“ConvertToUTF8")来解决这一问题.具体方法如下: 首先声明:这一方法前提是sublime text 2的安装路径没有中文字符,且系统路径的%username%中不包含中文字符.否则需要手动添加转换包,这个稍后说明. 1. 安装Sublime Package Control: 在Subl