关键词：
@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也可能不同，一般来说如下四种格式可覆盖所有浏览器。
eot：该格式仅在老版本的IE中使用
ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行，已经变成最常用的一种字体文件表示方式，支持的浏览器很多。
svg：(Scalable Vector Graphics)该字体可能最早在IOS设备上被支持，没有ttf格式使用的广泛。
woff：（Web Open Font Format）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由W3C标准化，以求成为web字体的统一标准。
如何使用自定义字体？
第一步，在CSS中引入字体并给名字取一个合适的名字，如下：
@font-face {
/* font-test*/
font-family: tonjay;
src:url(‘font/tonjay-web.woff‘),
url(‘font/tonjay-web.ttf‘),
url(‘font/tonjay-web.eot‘); /* IE9 */
}
font-family定义字体的名字，接下来的src是加载字体文件的位置，之所有有多个url就是因为浏览器兼容问题。
第二步，使用刚刚定义的字体，如下：
div {
font-family: tonjay;
}
附@font-face的浏览器字体兼容性
Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；
Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；
Internet Explorer： 自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；
Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。
css3嵌入字体
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法：例子： 查看详情
css3中@font-face模块自定义字体(代码片段)
一、@font-face模块介绍 @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，在Web的开发中使用字体不再只能使用Web安全字体。1、@font-face语法规则@font-facefont-family:<YourWebFon... 查看详情
css3自定义字体_使用@font-face方式实现个性化字体(代码片段)
...义字体的呢？资源网站大全https://55wd.com在css3中可以通过@font-face模块，把自己定义的Web字体嵌入到你的网页，web设计师可以使用他们喜欢的任意字体，只需要把该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计... 查看详情
css3自定义字体的使用方法
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我... 查看详情
css在线字体库，外部字体的引用方法@font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我... 查看详情
css3字体
CSS3@font-face规则使用CSS3，网页设计师可以使用他/她喜欢的任何字体。只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。在新的@font-face规则中，您必须首先定义字体的名称（比如myFirstFont），然后指向该字体文... 查看详情
css3字体2d转换3d转换
学习篇之CSS3字体、2D转换、3D转换一、字体@font-face将字体文件存放到web服务器上，通过CSS3@font-face规则中定义，它会在需要时被自动下载到用户的计算机上。@font-face{ font-family:myFonts;//定义字体名称 src:url(myFonts.ttf),url(myFont... 查看详情
网页嵌入自定义字体方法
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。... 查看详情
css3@font-face属性
属性定义及使用说明@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。字体的名称，font-face规则：font-family:myFirstFont;字体文件包含在您的服务器上的某个地方，参考CSS：src:url(‘Sansation_Light.ttf‘)如果字体文件是在不... 查看详情
css3字体
CSS3@font-face规则在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自... 查看详情
css3@font-face
...l",Arial,Sans-serif; }中文用body{font-family:"微软雅黑"}现在@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。原理是：字体文件放到web服务器，在需要的时候被自动下载到用户的计算机上。一... 查看详情
css3@font-face
css3之前，只能使用计算机上安装的字体css3引入了@font-face，为使用自定义的字体提供了便利。用法：@font-face{font-family:自定义名称;src:url(‘字体所在位置‘)}任意标签{font-family:自定义名称;}各个浏览器的支持度IE浏览器：EOTFireFox... 查看详情
css3入门之字体
...，通过CSS3,Web设计师可以使用他们喜欢的任意字体。1、@font-face引入网络字体Firefox、Chrome、Safari以及Opera支持.ttf(TrueTypeFonts)和.otf(OpenTypeFonts)类型的字体。InternetExplorer9+支持新的@font-face规则 查看详情
css3webfont与sprite
一、webfont1.1、什么是font-face1.2、font-face优点1.3、字体格式1.4、使用@font-face1.4.1、下载字体1.4.2、使用font-face将字体引入web中1.4.3、应用字体 1.4.4、字体格式转换1.4.5、查看字体编码1.4.6、base64内嵌字体二、CSSSprite2.1、将小图片... 查看详情
在 Windows 上使用 ClearType 使 CSS3 @font-face 字体渲染效果很好
】在Windows上使用ClearType使CSS3@font-face字体渲染效果很好【英文标题】：MakingCSS3@font-facefontrenderingplaynicewithClearTypeonWindows【发布时间】：2011-07-0211:11:29【问题描述】：首先是一些背景信息。似乎使用CSS3@font-face规则可以在任何浏览... 查看详情
css3与页面布局学习总结——webfont与sprite
...习总结（五）——WebFont与Sprite目录一、webfont1.1、什么是font-face1.2、font-face优点1.3、字体格式1.4、使用@font-face1.4.1、下载字体1.4.2、使用font-face将字体引入web中1.4.3、应用字体 1.4.4、字体格式转换1.4.5、查看字体编码1.4.6、base64... 查看详情
@font-face使用在线字体
@font-face规则在CSS3规范中属于字体模块，该规则的推出对于网页设计来说是一个革命性的进步。在传统设计中，设计师不敢使用各种艺术字体类型，甚至是常规字体也需要慎重使用。因为设计师必须考虑每位浏览者的系统中... 查看详情
加上cdn后字体跨域(代码片段)
@font-face是CSS3中的一个特性，可以把自己定义的Web字体嵌入到网页中，随着@font-face，越来越多的网页采用字体图标作为网页中的小图形。比如Bootstrap就采用了Glyphicons字体图标在Bootstrap的架构下可以免费使用Glyphicons的250多种图标... 查看详情