在前端页⾯中使⽤@font-face来显⽰web⾃定义字体【转】
本⽂转⾃的《》
是中的⼀个模块，他主要是把⾃⼰定义的Web字体嵌⼊到你的⽹页中，随着模块的出现，我们在Web的开发中使⽤字体不怕只能使⽤Web安全字体，你们当中或许有许多⼈会不⾃然的问，这样的东西IE能⽀持吗？当我告诉⼤家这个功能早在IE4就⽀持了你肯定会感到惊讶。我的Blog就使⽤了许多这样的⾃定义Web字体，⽐如说⾸页的Logo，Tags以及页⾯中的⼿写英⽂体，很多朋友问我如何使⽤，能让⾃⼰的页⾯也⽀持这样的⾃定义字体，⼀句话这些都是实现的，为了能让更多的朋友知道如何使⽤他，今天我主要把⾃⼰的⼀点学习过程贴上来和⼤家分享。
前端大文件上传解决方案
⾸先我们⼀起来看看@font-face的语法规则：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值说明
1、YourWebFontName：此值指的就是你⾃定义的字体名称，最好是使⽤你下载的默认字体，他将被引⽤到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source：此值指的是你⾃定义的字体的存放路径，可以是相对路径也可以是绝路径；
3、format：此值指的是你⾃定义的字体的格式，主要⽤来帮助浏览器识别，其值主要有以下⼏种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style：这两个值⼤家⼀定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
兼容浏览器
说到浏览器对@font-face的兼容问题，这⾥涉及到⼀个字体format的问题，因为不同的浏览器对字体格式⽀持是不⼀致的，这样⼤家有必要了解⼀下，各种版本的浏览器⽀持什么样的字体，前⾯也简单带到了有关字体的⼏种格式，下⾯我就分别说⼀下这个问题，让⼤家⼼⾥有⼀个概念：
⼀、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是⼀种RAW格式，因此他不为⽹站优化,⽀持这种字体的浏览器有
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
⼆、OpenType(.otf)格式：
.otf字体被认为是⼀种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,⽀持这种字体的浏览器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是⼀个开放的TrueType/OpenType的压缩版本，同时也⽀持元数据包的分离,⽀持这种字体的浏览器有
【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专⽤字体，可以从TrueType创建此格式字体,⽀持这种字体的浏览器有【IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的⼀种格式,⽀持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们⾄少需要.woff,.eot两种格式字体，甚⾄还需要.svg等字体达到更多种浏览版本的⽀持。
为了使@font-face达到更多的浏览器⽀持，写了⼀个独特的@font-face语法叫:
@font-face {
font-family: 'YourWebFontName';
src: url('?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'), url('f') format('truetype');/*non-IE*/
}
但为了让各多的浏览器⽀持，你也可以写成：
@font-face {
font-family: 'YourWebFontName';
src: url(''); /* IE9 Compat Modes */
src: url('?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('f')  format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
说了这么多空洞的理论知识，⼤家⼀定有点⼼痒痒了，那么我们先来看看W3CPLUS⾸页中导航部分的兰⾊字体是如何实现的，假如我们有⼀个这样的DOM标签，需要应⽤⾃定义字体：
HTML Code:
<h2 class="neuesDemo">Neues Bauen Demo</h2>
通过@font-face来定义⾃⼰的Web Font:
@font-face {
font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_');
src: url('../fonts/neues_?#iefix') format('embedded-opentype'),
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
url('../fonts/neues_f') format('truetype'),
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
font-weight: normal;
font-style: normal;
}
我在这⾥采⽤的是相对路径，当然⼤家也可以使⽤绝路径。到这⾥我们就需要把定义好的字体应⽤到我们实际页⾯中去：
font-family: 'NeuesBauenDemo'
}
效果：
看到上⾯的效果，我想⼤家会感到@font-face很神奇，同时也想争着做做看，可是⼀动⼿才发现，特殊字体我要怎样才能得到，那些.eot,.woff,.ttf,.svg 这些字体格式⼜怎么获取呢？有些朋友可能就不知道如何运⼿了，那么我们就带着这些问题来⼀个全程完成的实例吧：
⼀、获取特殊字体：
我们拿下⾯这种single Malta字体来说吧：
要得到single Malta字体，不外乎两种途径，其⼀到付费⽹站购买字体，其⼆就是到免费⽹站DownLoad字体。当然要给钱的这种傻事我想⼤家都不会做的，那我们就得到免费的地⽅下载，在哪有呢？我平时都是到和寻⾃⼰需要的字体，当然⽹上也还有别的下载字体的地⽅，这个Demo使⽤的是的Single Malta字体，这样就可以到这⾥下载：
Single Malta下载下来后，需要把它解压缩出来：
⼆、获取@font-face所需字体格式：
特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，我们同样是需要第三⽅⼯具或者软件来实现，下⾯我给⼤家推荐⼀款我常⽤的⼀个⼯具，别的先不多说，⾸跟我点进⼊到下⾯这个界⾯吧。
如果你进⼊页⾯没有看到上图，你可以直接点击导航:
如果你看到了上⾯的界⾯，那就好办了，我们来看如何应⽤这个⼯具⽣成@font-face需要的各种字体，先把我们刚才下载的字体上传上去：
上传后按下图所⽰操作：
现在从Font Squirrel下载下来的⽂件已经保存在你本地的电脑上了，接着只要对他进⾏解压缩，你就能看到⽂件列表如下所⽰：
⼤家可以看到，解压缩出来的⽂件格式，⾥⾯除了@font-face所需要的字体格式外，还带有⼀个DEMO⽂件，如果你不清楚的也可以参考下载下来的DEMO⽂件，我在这⾥不对DEMO说明问题，我主要是给⼤家介绍如何把下载下来的⽂件有价值的运⽤到我们的项⽬中。
例如在⾃⼰的本地创建了⼀个fontface项⽬：
为了让项⽬结构更清晰，我们在项⽬中单独创建⼀个fonts⽬录，⽤来放置解压缩出来@font-face所需的字体格式：
现在@font-face所需字体已经加载到本地项⽬，现在本地项⽬中的style.css中附上我们需要的@font-face样式
@font-face {
font-family: 'SingleMaltaRegular';
src: url('../');
src: url('../?#iefix') format('embedded-opentype'),
url('../fonts/singlemalta-webfont.woff') format('woff'),
url('../f') format('truetype'),
url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
到这⾥为⽌，我们已经通过@font-face⾃定义好所需的SingleMalta字体，离最后效果只差⼀步了，就是把⾃⼰定义的字体应⽤到你的Web中的DOM元素上：
h2.singleMalta {
font-family: 'SingleMaltaRegular'
}
效果：
看到上⾯的效果，那⼤家就知道我们实现成功了。那么关于@font-face帮你打造特殊效果的字体，到这⾥基本上就完成了，我在这⾥需要提醒使⽤者：
1、如果你的项⽬中是英⽂⽹站，⽽且项⽬中的Logo，Tags等应⽤到较多的这种特殊字体效果，我建议你不要使⽤图⽚效果，⽽使⽤@font-face，但是你是中⽂⽹站，我觉得还是使⽤图⽚⽐较合适，因为加载英⽂字体和图⽚没有多⼤区别，但是你加载中⽂字体，那就不⼀样了，因为中⽂字体太⼤了，这样会影响到项⽬的某些性能的优化；
2、致命的错误，你在@font-face中定义时，⽂件路径没有载对；
3、你只定义了@font-face，但并没有应⽤到你的项⽬中的DOM元素上；
以上⼏点都是在平时制作中常出现的问题，希望⼤家能⼩意⼀些，另外我们没有办法在购买所有字体，就算你实⼒雄厚，那也没有办法在⼀台服务器主机上放置你所有项⽬需要的字体。因此我给⼤家提供⼏个免费字体下载的⽹址：,,,,,,，不然你点将有更多的免费字体。前⾯⼏个链接是帮助你获取⼀些优美的怪异的特殊字体，但下⾯这个⼯具作⽤更是⽆穷的⼤，他能帮你⽣成@font-face所需要的各种字体，这⼯具就是。
最后在提醒⼀下，使⽤@font-face别的可以忘了，但千万不能忘，因为他能帮你⽣成@font-face所需的各种字体格式。
到此关于@font-face就介绍完了，不知道⼤家喜欢不喜欢，如果喜欢的话赶快动⼿实践⼀下，有Blog的可以马上运⽤上去，也可以炫⼀下。
2014年03⽉更新——@font-face⽆法在Firefox下正常⼯作的解决⽅案，详细的请点击：
如需转载烦请注明出处：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。