在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

@font-face的语法规则:

   @font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
[font-stretch: <stretch>];
[unicode-range: <unicode-range>];
}

font-family定义字体的名称,src用来指定字体文件地址,可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下:

描述符 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • ormal
  • italic
  • oblique
可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

字体格式有太多选择,不幸的是始终没有一个能在所有的浏览器上通用。这意味着,你必须使用多种字体的方案来保持用户跨平台的一致性体验。当前,在web上使用各种不同字体格式有:TTF、OTF、WOFF、EOT 和 SVG 。具体不同字体在各品牌浏览器的支持情况,这里不一一介绍。

在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@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 */
}

使用@font-face定义自己的WEB字体如下:

@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
}

 题外话

如何获取我们所需要的字体文件呢?其一,到付费网站购买字体;其二,到免费网站下载字体。当我们获取到字体,如何得到同一字体的.eot,.woff,.ttf,.svg字体格式。这里推荐一个网页工具font squirrel,它能有效帮助我们生成不同字体格式文件。比如,我们手上已经有目标字体的ttf格式文件,上传该ttf文件,font squirrel便能帮我们方便地生成其他字体格式文件。关于font squirrel的具体使用,请参考fjdingsd博文,这里不再赘述。

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. 整理4种Vue组件通信方式

    整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 ...

  2. 【RL-TCPnet网络教程】第26章 RL-TCPnet之DHCP应用

    第26章     RL-TCPnet之DHCP应用 本章节为大家讲解RL-TCPnet的DHCP应用,学习本章节前,务必要优先学习第25章的DHCP基础知识.有了这些基础知识之后,再搞本章节会有事半功 ...

  3. MySQL 千万级 数据库或大表优化

    首先考虑如下因素: 1.数据的容量:1-3年内会大概多少条数据,每条数据大概多少字节: 2.数据项:是否有大字段,那些字段的值是否经常被更新: 3.数据查询SQL条件:哪些数据项的列名称经常出现在WH ...

  4. Kubernetes因限制内存配置引发的错误

    今天对一个pod进行内存资源调整后, 一直卡在ContainerCreating的状态, 执行describe命令查看该 Pod 详细信息后发现如下 . [root@master-01 ~]# kub ...

  5. VirtualBox虚拟机克隆迁移步骤

    VirtualBox是常用的虚拟机管理软件,和VMware一样,用的很多.在使用过程中,有的时候需要对虚拟机进行迁移.比如我们原来的服务器,使用的win10操作系统,上面利用VirtualBox安装了 ...

  6. Python实现 Typora数学公式 转 有道云笔记Markdown数学公式

    话不多说上代码,可以按照自己的需求把匿名函数改成普通函数,改不来的可以加我微信我帮你改. 块状数学公式转换 import re test_str = r''' $D={\{\vec{x_1},\vec ...

  7. IdentityServer4之Implicit(隐式许可)

    IdentityServer4之Implicit(隐式许可) 参考 官方文档:3_interactive_login .7_javascript_client 概念:隐式许可 认证服务端配置 认证服务 ...

  8. asp.net core 系列 10 配置configuration (上)

    一.  ASP.NET Core 中的配置概述 ASP.NET Core 中的应用配置是基于键值对,由configuration 程序提供. configuration  将从各种配置源提供程序操作键 ...

  9. 从锅炉工到AI专家(10)

    RNN循环神经网络(Recurrent Neural Network) 如同word2vec中提到的,很多数据的原型,前后之间是存在关联性的.关联性的打破必然造成关键指征的丢失,从而在后续的训练和预测 ...

  10. IDEA搭建Spring Boot项目

    所需工具 新建项目 创建一个login控制器 写入两个注释 import导入项会自动添加@RestController@RequestMapping(value = "/login" ...