font face 多个字体 @font-face语句如何嵌入中文字体

什么是@font-face

? ??@font-face是一种网络字体,是CSS的模块,利用CSS的@font-face属性可以在网页中嵌入任意字体。

? ??字体使用是网页设计中不可或缺的一部分。网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。

? ?美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:  一、不可能大范围的使用该字体;  二、图片内容相对使用文字不易修改;  三、不利于网站SEO。  网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。而只有通过CSS的@font-face属性来实现在网页中嵌入字体的方法逐渐成为主流。

@font-face语句规则

主流浏览器都能很好地支持@font-face,但对于嵌入的字体文件的识别,却是各有各的喜好。

所以在写@font-face语句之前,需要获取要使用字体的四种文件格式,确保能在主流浏览器中都能正常显示该字体。

四种格式的文件准备好以后,就可以写@font-face语句了,格式如下:

@font-face?

{

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');

}

在页面中需要的地方使用该字体:

p { font: 13px fontNameRegular, Arial, sans-serif; } 或

h1{font-family: fontNameRegular}

@font-face实现-英文

? ?英文字体实现@font-face的方法比较成熟,有时候看老外的个人技术博客,经常能遇到。做法相对中文简单很多,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF文件,我们需要通过这种文件格式转换为其余三种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或codeandmore提供的在线字体转换服务获取。

@font-face实现-中文

? ??@font-face是老外发明的,所以他们从来没想过中文的情况,中文一套字体一般要3-6M这样的庞然大物嵌入网页上,结果可想而知,在页面加载完成前已经被关掉了。

@font-face语句如何嵌入中文字体_fontsquirrel

? ? 当然,不是说中文就无法通过@font-face实现嵌入,但需要再麻烦一步:按需截取(根据文章所涉及到的文字生成小字库),如此便能最大程度地节约流量,将字体减到最小。

? ? 可以在网上下载fontcreator用Unicode码来找到需要的字,保留需要的字其他的全删掉。

? ?确实麻烦。有没有更快一点的方法?有的!!!

英文比较专业的有?TypeKit.com和fontdeck.com

中文比较专业的有?youziku.com(有字库)

中文的用起来还是比英文的麻烦,英文的直接引用就可以了,整套字体被嵌入网页速度也不受影响(一般英文一般一百多K),中文的无论如何都要先截取一下的。

? ? 不过好在"有字库"网站功能还挺人性化,所有浏览器支持的格式(.EOT.TTF.WOFF.SVG)都自动为你生成好,你只需要提交你需要的字就可以了。甚至还有一种js方式,只需要引用一段js代码,不需要提交文字就能自动根据文章生成小字库了。非常方便。如果你想用中文@font-face那我推荐"有字库"。

不可滥用@font-face

??凡事讲究度,网页上的美化小技巧,就像做菜放的调味料,放一点美味,放多了就反胃了。

? @font-face也是如此,如果在页面上大面积应用,页面体验反而会下降,亲自已斟酌吧。

  

爱华网本文地址 » http://www.aihuau.com/a/8105150103/347368.html

更多阅读

cf没有枪声和脚步声 cf听不到枪声脚步声

cf没有枪声和脚步声——简介以前玩CF时,经常遇到没有声音的问题,小编也很疑惑,尝试过很多方法,虽然可以解决了,不过还是不太确定倒是问题出在哪里。因为这个问题涉及到太多的地方,其中包括游戏中的设置、系统声音文件、电脑CF声音组件等。

小学常用说明方法:列数字、举例子、作比较、打比方

常见的说明方法有举例子、作引用、分类别、列数字、作比较、画图表、下定义、作诠释、打比方、摹状貌、作假设这11种。小学常见的有:举例子、引资料、列数字、打比方、分类别、作比较。(1)举例子举出实际事例来说明事物,使所要说明的事

写给企业老板:没有观念的改变,就没有企业的进步

     昨天培训的时候,我讲到了一个观点“同行是朋友,不是敌人”,学员之间争论相当激烈,有的坚持“同行是朋友”,有的坚持“同行是敌人(冤家)”,看到大家相互争持不下,我便说:“万事万物都有存在的必然规律,如果你能按照事物的本来规律去做

易居中国董事局主席:商业脉络远比事件更重要(二)

  把脉楼“势”  “谁能有本事设计出一个房地产业模型,在里面可以找到每一个细分指标参数,同时准确预测房地产走势。我想没有。而这就是房地产业精彩的地方。”  现在的周忻,每天要接待至少五至六家开发商的拜访,谈市场,

声明:《font face 多个字体 @font-face语句如何嵌入中文字体》为网友茉莉花分享!如侵犯到您的合法权益请联系我们删除