1. 如何使用@font-face
@font-face是CSS3中的一个模块，他主要将自己定义的网页字体嵌入到你的网页中，
@font-face的句子规则：
@font-face { font-family: ;src: [][, []]*;[font-weight: ];[font-style: ]; }数值说明
1. YourWebFontName：该值指的是您的自定义字体名称，最好使用您下载的默认字体，该字体将引用您的网页元素中的font-family。 如“font-family:“YourWebFontName”;”
2、source：该值指的是你的自定义字体的存储路径，可以是相对路径，也可以是绝对路径；
3.format：这个值是指你自定义字体的格式，主要是用来帮助浏览器识别的。 其取值主要包括以下类型：truetype、opentype、truetype-aat、embedded-opentype、avg等；
4. 粗细和风格：这两个值你一定要熟悉。 Weight定义了字体是否斜体，style主要定义字体样式，比如斜体。
兼容浏览器
说到@font-face的浏览器兼容性css 自定义字体，这里就是一个字体格式的问题，因为不同的浏览器支持的字体格式不一致，所以需要知道各个版本的浏览器支持哪些字体，以及上面简单提到的几种与字体相关的格式。 下面我就这个问题单独谈谈，让大家心中有数：
1.TrueTpe（.ttf）格式：
.ttf 字体是 Windows 和 Mac 最常见的字体。 它是一种 RAW 格式。 因此css 自定义字体，它没有针对网站进行优化。 支持这些字体的浏览器包括[IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOSMobileSafari4。 2+]；
2. OpenType (.otf) 格式：
.otf字体被认为是一种原始字体格式，它是基于TrueType的，因此它也提供了更多的功能。 支持这些字体的浏览器包括[Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOSMobileSafari4.2+]；
3.WebOpenFontFormat（.woff）格式：
.woff 字体是网络字体中最好的格式。 它是TrueType/OpenType的开放压缩版本，也支持元数据包的分离。 支持这些字体的浏览器包括[IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+]；
4.EmbeddedOpenType（.eot）格式：
.eot 字体是 IE 的特殊字体，可以从 TrueType 创建。 支持这些字体的浏览器有[IE4+]；
5.SVG（.svg）格式：
.svg 字体是一种基于 SVG 字体渲染的格式。 支持这些字体的浏览器包括[Chrome4+、Safari3.1+、Opera10.0+、iOSMobileSafari3.2+]。
这意味着在@font-face中我们至少需要.woff和.eot字体，甚至还需要.svg等字体来支持更多的浏览版本。
为了获得更多浏览器对@font-face的支持，PaulIrish写了一个奇特的@font-face句型，称为Bulletproof@font-face：
@font-face { font-family: 'YourWebFontName';src: url('YourWebFontName.eot?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'),
url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }但为了支持各种浏览器，也可以这样写：
@font-face { font-family: 'YourWebFontName';src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}讲了这么多空洞的理论知识，想必大家已经跃跃欲试了，那么我们先来看看W3CPLUS首页导航部分的蓝色字体是如何实现的。 如果我们有这样的 DOM 标签，我们需要应用我们自己的定义字体：
HTML 代码：
Neues Bauen Demo
通过@font-face定义你自己的WebFont：
@font-face { font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_bauen_demo-webfont.eot');src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');font-weight: normal;
font-style: normal;}我这里使用的是相对路径，但你也可以使用绝对路径。 此时我们需要将定义的字体应用到我们的实际页面：
h2.neuesDemo { font-family: 'NeuesBauenDemo' }二、字体资源可以在那里找到 1、icomoon字体库
IcoMoon成立于2011年，推出了第一款自定义图标字体生成器，允许用户选择自己需要的图标并将其制作成一种字体。 内容多样、全面。 唯一遗憾的是美国服务器连接速度慢。
推荐网站：
2、阿里iconfont字体库
这是阿里爸爸M2UX的iconfont字体库，包括网店图标库和阿里爸爸图标库。 您可以使用AI制作图标并上传生成。 一个字，免费，免费！ ！
丰泰洛
在线定制您自己的 iconfont 字体库，也可以直接从 GitHub 下载整个图标集。 这个项目也是开源的。
3、字体真棒
这是我最喜欢的字体之一，更新也比较快。 已有 369 个图标。
4、雕文半身人
该字体图标可以在 Bootstrap 下免费使用。 带有 200 多个图标。
5、图标8
提供PNG免费下载，像素可达500PX
三、如何利用资源
1、首先点击购物车按钮，将您需要的图标添加到Iconfont-阿里巴巴矢量图标库中的“临时货架”中
2. 选择所有要使用的图标后，“另存为项目”并为其命名。 然后在“图标管理”-“图标应用项”中找到此项。
3.获取在线链接并将以上代码复制到CSS中
3、当HTML中需要使用图标时，使用iconfont类名。
4、以后可以通过控制iconfont类的属性来改变图标的样式
.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale; padding-left:20px
}可以在页面中引用和更改。
补充：这些图标也可以下载到本地使用。
图标添加到临时架子后，选择“下载到本地”，您将得到以下文件：
浏览器打开三个可以使用的demo_xxx.html步骤，选择一种方法使用即可；
我们可以在阿里icofont中创建一个项目，将某个项目中使用的字体放在该项目中。 添加字体时，我们只需要重新下载字体文件并替换之前的四个文件即可。
