很长时间，web设计师总是得用一些“web-safe”字体，英文用body{font-family:"corbel", Arial, Sans-serif;  }中文用body{font-family:"微软雅黑" }现在@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

原理是：字体文件放到web服务器，在需要的时候被自动下载到用户的计算机上。

一、@font-face介绍

语法：

@font-face {

      font-family: <YourWebFontName>;

      src: <source> [<format>][,<source> [<format>]]*;

      [font-weight: <weight>];

      [font-style: <style>];

    }

参数说明：

YourWebFontName:此值为你自己定义的字体名称，最好是使用你下载的默认字体名称，它将被引用到你的web元素的font-family属性中。

source:自定义字体的存放路径，可以是相对路径或绝对路径。

format:指自定义字体的格式，主要用来帮助浏览器识别，其值有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等。

font-weight和和font-style就是定义字体是否为粗体，和字体样式。

浏览器兼容写法：

 @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 */

                      }

二、使用方法

1、下载特殊字体

比如我要下载single-malta.font这个字体，下载字体链接为

http://www.dafont.com/single-malta.font

下载解压后可以看到一个ttf文件。

2、用第三方工具生成@font-face所需字体格式，即.eot,.woff,.ttf,.svg字体格式：

第三方工具链接：http://www.fontsquirrel.com/fontface/generator

具体步骤是在WEBFONT GENERATOR页面上传第一步下载的字体，然后下载解压。

下载解压后发现文件夹有很多多余的demo页面和css，我们只需要.woff,.ttf,.svg,.eof四个文件。把这四个文件复制到站点的fonts目录。现在准备工作已经完成了。

3、在style.css中添加@font-face相关代码。

4、现在就可以在样式中用font-familyl。

代码如下：

<style type="text/css">

@font-face {

    font-family: 'SingleMaltaRegular';

    src: url(fonts/singlemalta-webfont.eot);

    src: url(fonts/singlemalta-webfont.svg#SingleMaltaRegular)format('svg'),

         url(fonts/singlemalta-webfont.ttf)format('truetype'),

          url(fonts/singlemalta-webfont.woff)format('woff'),

          url(fonts/singlemalta-webfont.eot?#iefix)format('embedded-opentype');

    font-weight: normal;

    font-style: normal;

}

h2.singleMalta {

    font-family: 'SingleMaltaRegular'

}

</style>

<body>

<h2>普通字体</h2>

<h2 class="singleMalta">single malta</h2>

</body>

效果：

三、资源链接

网页中导入特殊字体@font-face属性详解

http://www.w3cfuns.com/thread-5597432-1-1.html

获取字体

第三方生成字体工具

http://www.fontsquirrel.com/fontface/generator

css3 @font-face的更多相关文章

  1. css自定义字体完美解决方案example

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  4. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  5. CSS3魔法堂：认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  6. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  7. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  8. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  9. CSS3 icon font

    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...

  10. CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

随机推荐

  1. Nodejs与ES6系列2:Promise对象

    2.promise对象 js单线程异步执行的特性,因此在代码中充斥着回调函数.随着回调函数的增加,代码的可读性会愈来愈差,因此引入promise对象是不错的一种选择,可以避免层层回调函数.在ECMA6 ...

  2. css知多少（3）——样式来源与层叠规则

    上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...

  3. 购物车catslider简单的多商品分类滑动

    效果预览 实例代码 <!DOCTYPE html> <html lang="zh" class="no-js"> <head> ...

  4. 使用 JavaScript 实现灵活的固定导航功能

    如果你想在网页中实现灵活的固定导航功能,那么 Smart Fixed Navigation 这个 JavaScript 小脚本可以帮助轻松实现一个固定的导航,让用户在访问你的网站的时候可以随时使用菜单 ...

  5. 设置时间 new Date

    1.标准格式下的时间是object ,操作时可以通过 var cDate=new Date(startTime.getTime());来复制当前日期避免操作给初始日期带来影响 2. 以月为单位计算想要 ...

  6. 浅析css布局模型2

    上节对整个布局模型进行了概述,这节先谈一下布局模型的几个属性. z-index属性 该属性是检索或设置对象的层叠顺序,默认值为auto,遵循其父对象的定位. 并级的对象,该属性的值越大,则被层叠在最上 ...

  7. ABAP 指針常用语法

    1 .定义指針 :指針的定義主 要有以下語句 定義任意類型的指針,但是不具備欄位結構(僅僅是一個地址) FIELD-SYMBOLS <carrid> TYPE ANY. 參考數據庫表定義( ...

  8. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q88-Q91)

    Question 88  You are designing a SharePoint 2010 application that stores data in a list named Base L ...

  9. Windows下修改Android手机的hosts

    Windows下修改Android手机的hosts 1.首先,手机是Root过的. 2.连接手机和电脑, adb shell 进入命令行. 3.获取root用户权限: su -root 4.不知道为何 ...

  10. Android 尺寸单位转换和屏幕适配相关

    Android 尺寸单位转换和屏幕适配相关 各种尺寸单位的意义 dp: Density-independent Pixels 一个抽象的单元,基于屏幕的物理密度. (dp和dip的意义相同,所以不用区 ...