解决网页中使用自定义中文字体的方法

  英文字体自定义

  中文字体自定义

  上面的两个图片例子,展示了自定义字体在网页里面的应用,这里不是浏览器的字体,也不是客户电脑里安装的字体,也不是图片或其他方式,而且是以文字的方式显示,这样做的好处是有的,最简单的好看啊,再比如可以方便修改,重要的是利于SEO优化。好处不多讲,先讲讲如何实现。

  首先,要准备字体,要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。

  下面是几种主流浏览器对于字体格式的支持情况:

  .TTF或.OTF,适用于Firefox 3.5、Safari、Opera

  .EOT,适用于Internet Explorer 4.0+

  .SVG,适用于Chrome、IPhone

  获取到三种格式的字体文件后,就可以使用CSS的@font-face属性来调用字体了

  代码如下:

  @font-face {

  font-family: ‘fontNameRegular’;

  src: url(‘fontName.eot’);

  src: local(‘fontName Regular’),

  local(‘fontName’),

  url(‘fontName.woff’) format(‘woff’),

  url(‘fontName.ttf’) format(‘truetype’),

  url(‘fontName.svg#fontName’) format(’svg’);

  }

  这样简单两步就实现了,不复杂的,但是如果你真认为这样就搞定了,那就没有这篇文章存在的必要了。

  这里存在一个问题,如何获取某种字体的这三种格式文件呢?一般地,我们使用下载的特殊字体,最常见的是.TTF文件,通过TTF文件我们可以通过网站Font Squirrel或Online Font Converter提供的在线字体转换服务获取。我自己用的是Font Squirrel,它允许我们选择需要的字符生成字体文件,这样就大大缩减了字体文件的大小,使网站性能更强。该网站不支持1M以上的字体文件转换。至于如何使用这个网站,网上大把的有,自己去看吧。

  需要注意的是这里字体文件不能超过1M,这样对于英文字体没有什么问题,毕竟英文字体就26个字母,加上一些符号,几十KB就可以搞定,但是对于中文字体,恐怕这种方法就不适用了,中文字体动不动就是几M,有的甚至10M以上,对于中文字体网站Font Squirrel是无能为力的,就算能转换,一个网站因为一个自定义的字体,而增加几M的流量是很不明智的选择。

  那么这种情况下,对于中文字体,我们需要从字体中挑出网站必须的那些文字,然后做成自己的字体,一般百来个汉字差不多了。

  从字体中挑出我们需要的文字,字体编辑软件The Font Creator必不可少了,先看下软件长啥样。

  这里就是我最后挑出来的必须用到的文字。如何从字体文件里面找出这些文字就是下一个问题了。这里选编辑-》查找或者直接Ctrl+F,就会看到如下的界面了

  选择Unicode,这里可以根据汉字的Unicode来定位查找我们需要的文字。至于汉字的Unicode,网上可是大把的资源可以找到,随便百度一个http://www.nengcha.com/soucha/code/unicode/class/,比如我找“方”,对应的Unicode是“65B9”,那在美元符后面输入“65B9”,点查找,就可以定位到方了,这样我们想要哪个字,就很快能找到,你可以拷贝出来新建一个字体,也可以将字体文件里面其他不要的字体删掉。可以先把我们需要的字全部找出来,然后根据Unicode排个序,怎么排序,恐怕又有这个问题了,最简单的,就是通过刚才说到的网站http://www.nengcha.com/soucha/code/unicode/class/,这里一次最多可以输入100个字,出来就是按Unicode排序的,很方便,一个一个的找,中间部分全部删掉,是不是容易多了。

  到这里基本上一个瘦身过的.ttf的字体文件就搞定了,再回到网站Font Squirrel去生成其他格式的文件吧。后面的事就没什么说的了

时间: 2024-08-04 03:58:26

解决网页中使用自定义中文字体的方法的相关文章

解决DW中不支持中文文件名的方法

解决|文件名|中文 用Dreamweaver制作网页时,如果插入的图片.GIF动画.声音.视频或链接的网页是用中文命名的,在用IE浏览器浏览时可能显示不出来.以至于大家不得不将用到的素材全改为英文文件名,然后再在Dreamweaver中引用.随着素材的增多,因为是英文文件名,要查找某个文件是多么不方便呀! 经过摸索,笔者发现Dreamweaver可以插入以中文命名的素材.也可以链接以中文命名的网页.在插入素材或链接网页后切换到代码窗口,将乱码文件名改为相应的中文文件名即可. (注意:"属性&qu

eclipse for php 写的代码有中文但在网页中却显示中文乱码。

问题描述 eclipse for php 写的代码有中文但在网页中却显示中文乱码. eclipse for php 写的代码有中文但在网页中却显示中文乱码,试过网上的方法,仍无法解决,急~ 解决方案 1.设置一下php文件的编码格式,如utf-8 2.在php代码前面加一句header('content-type:text/html;charset=utf-8'); 3.确定浏览器用utf-8来解析

escape函数解决js中ajax传递中文出现乱码问题_javascript技巧

本文实例讲述了escape函数解决js中ajax传递中文出现乱码问题,分享给大家供大家参考.具体方法如下: 一.问题描述: 本来网页特效中的escape()是将中文按iso-8859-1字符集进行url编码的,那样通过 request.getparameter()是能直接获取到请求参数的,但后来的javascript将escape()换成了unicode字符集编 码,如此一来,在jsp教程和servlet中就没法直接拿到请求参数了,具体原因我也不知道. 二.解决办法: 1.首先对中文字符进行两次

电脑中通过修改注册表解决网页无法添加到收藏夹的方法

  电脑中通过修改注册表解决网页无法添加到收藏夹的方法.最近有不少用户反映在电脑中出现了无法添加网页到收藏夹的问题,尝试了各种方法都无法解决这个问题.对此,在接下来的内容中,小编为大家提供了一种通过修改注册表解决网页无法添加到收藏夹的方法,大家可以参考一下. 1.按Win+R打开运行,输入regedit并按回车键; 2.在注册表编辑器依次展开HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/Explorer/UserShell

PowerPoint 2013中创建自定义路径动画的方法

  PowerPoint 2013中创建自定义路径动画的方法            1.在幻灯片中选择对象,在"动画"选项卡的"高级动画"组中单击"添加动画"按钮,在打开的下拉列表中选择"自定义路径"选项,如图1所示. 图1 选择"自定义路径"选项 2.此时鼠标指针变为十字形,在幻灯片中单击创建路径起点,然后按住左键移动鼠标,在适当位置单击创建拐点,绘制到路径终点后双击结束路径的绘制,此时动画会预览一次,幻

解决JS中乘法的浮点错误的方法

 本篇文章主要介绍了解决JS中乘法的浮点错误的方法.需要的朋友可以过来参考下,希望对大家有所帮助 JS里做小数的乘法运算时会出现浮点错误,具体可以测试一下:     <script>  alert(11*22.9)  </script>    结果是251.89999999999998 而不是251.9     这个问题想必有很多人为之头痛.那么如何解决呢?在此给出解决办法.    1.    代码如下: <script>  alert(11*(22.9*10)/10)

PHP批量获取网页中所有固定种子链接的方法_php技巧

本文实例讲述了PHP批量获取网页中所有固定种子链接的方法.分享给大家供大家参考,具体如下: 经常的下载链接比较多的时候,就像一次性将所有的链接添加到迅雷或者电炉,但是没有在这种选项,怎么办,咱是PHPer啊,这事儿难不到咱 且看代码,当然要换成你的,要根据具体情况来做修改. <?php header("content-type:text/html;charset=utf8"); $str = file_get_contents('./ShowFile.asp'); $str1 =

JavaScript获取网页中第一个图片id的方法_javascript技巧

本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

JavaScript获取网页中第一个链接ID的方法_javascript技巧

本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="