网站制作如何使用特殊字体
这是设计理念不断进步的UI老师们所不能容忍的。字体可是页面效果的根本,好比T台模特的衣服换了千万种,但你只能用这一两个模特(对于中文用户那就几乎只有一个宋体)?如何才能在网页上应用丰富的字体效果?
特殊字体应用方案
目前方案无非三种:
1. 客户打开网页的时候,提示客户安装该字体。
2. 制作图片嵌入网页。
3. 把字体嵌入到网页中(通过上传字体文件到指定目录,让CSS引用显示)。
第一种方案明显存在弊端,用脚本程序去识别客户端是否含有该字体,加重程序的负载量。而且严重影响用户的体验。效果最次!
第二种方案生成图片,网页加载慢,不利于百度收录,效果差!
第三种方案流量小加载速度快,效果最好!
第三种方案就是指网络字体(web font,也被称为“网页内嵌字体”或“网页外调字体”),通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受浏览客户端的影响。
网络字体与浏览器支持
网络字体是靠CSS中的@font-face语句来实现的,通常认为网络字体是CSS3中的一个模块,其实早在CSS2中就已经有了,连老古董IE6甚至IE4都支持。其他和种浏览器包括手机浏览器也都完美支持(如IE、360、搜狗、火狐、chrome、safari、Opera等)。
网络字体使用方法
各种浏览器都支持@font-face语句,但嵌入的字体文件却是各自为政。要想使所有浏览器都能正常显示,那你就得准备各种格式的字体文件进入嵌入(.eot、.woff、.svg、.ttf)。
可以将字体上传到FontSquirrel上,自动生成所需要的所有格式。然后将文件上传到空间,然后根据@font-face语句规范进行引用。
中文网络字体使用方法
中文字体要注意一下,因为中文字体不同于英文,一套中文字体一般4-6M如果整套嵌入的话,没有多少浏览者会有耐心等到字体加载完,在加载完之前已经关闭页面了。
所以中文字体需要事先进行截取,根据文章内容涉及到的字进行截取,截取后的小字体方可嵌入使用。
没错中文确实太麻烦了,这也是为什么英文网页使用网络字体那么多,中文却很少遇到。
第三方平台简易操作
要准备各种格式的文件操作起来太麻烦了,尤其中文还要截取小字库。
没有专业的工具就很难实现了,不过不用担心,如果借助于第三方平台,这一切就易如反掌。
现在网上已经出现一些很好的平台。如英文的typekit、fontdeck、google font等,中文的“有字库”youziku.com等,都可以大大方便网络字体的使用。
有字库主要针对中文网络字体引用,使用方法主要有两种:
1. javascript方式
选定字体后,网站会提供给你一段javascript脚本,不需要提交文章,直接将脚本引入之后之前,就可以了,脚本会自动根据当前文章内容生成各种格式的字体文件,并嵌入到当前页面。
2. CSS方式
选定字体后,需要提交文章内容,网站会根据文章内容截取成小字库,自动生成各种格式的字体文件(.eot、.woff、.svg、.ttf),并返回一个css文件引用的Link标签,只需要将此Link标签引入页面的head标签中即可,最后别忘了在引用网络字体的标签上设置class。
推荐新闻
更多行业-
SEO网站优化团队各个专员应具备的能力
SEO网站优化团队各个专员应具备的能力SEO网站优化中非常注重细节,一...
2011-12-14 -
如何制定一份优秀的网站建设方案?
企业不只是想开始使用网站。建立一个优秀的网站,他们首先需要做的就是制定...
2022-05-30 -
SEO优化之竞争百度SEO的后几名
SEO优化之竞争百度SEO的后几名从SEO网站优化这个词已经有将近一个...
2011-11-24 -
英国主流大报《泰晤士报》卷入窃听丑闻
据新华社电 英国《泰晤士报》的编辑近日被要求协助警方对“窃...
2012-02-04 -
Dreamweaver如何插入Flash多媒体
通常情况下,网页中的多数多媒体文件是由Flash网站制作完成的,并且将...
2015-08-11 -
SEO优化之如何提高文章质量的四个技巧
SEO优化之如何提高文章质量的四个技巧现实生活中,我们都希望能够买那些...
2011-11-23
预约专业咨询顾问沟通!
免责声明
非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。
4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!
联系方式:010-60259772
电子邮件:394588593@qq.com