@font-face模块

        可以帮助我们轻松解决Web页面中使用优雅字体的方式，而且我们可以根据需要自定义多种字体，但是每个@font-face只能定义一种，若需要多个字体就启用多个@font-face规则。

        @font-face 主要就是把自己想要的，或者自己定义的Web字体嵌入到Web页面中，然后这些字体就会被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存，使用它来修饰文本。也就是我们所说的Web字体嵌入。
描述符 值 描述
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
  • normal
  • 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"。
 


@font-face文件


TrueType
 
        Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
 
EOT– Embedded Open Type (.eot)
 
        EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
 
OpenType(.otf)
 
        OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
 
WOFF–WebOpen Font Format (.woff)
 
        WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。
 
SVG(Scalable Vector Graphics) Fonts (.svg)
 

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

兼容所有浏览器的声明方法: 

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'icomoon';
    src:url('../font/icomoon.eot');  /* IE9兼容模式 */
    src:url('../font/icomoon.eot?#iefix') format('embedded-opentype'), /* IE6~IE8 */
        url('../font/icomoon.woff') format('woff'), /* 现代浏览器 */
        url('../font/icomoon.ttf') format('truetype'),/* safari，Android,ios */
        url('../font/icomoon.svg#icomoon') format('svg'); /* Legacy ios */
    font-weight: normal;
    font-style: normal;
}

示例：

index.html

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<title></title>
    6. 

  6. 	<link rel="stylesheet" href="../css/stylesheet.css" />
    7. 

  7. 	<style>
    8. 

  8. 		div{
    9. 

  9. 			font-family: amadeus_regularamadeusRg;
    10. 

  10. 		}
    11. 

  11. 	</style>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

  14. 	<div>staven</div>
    15. 

  15. </body>
    16. 

  16. </html>
stylesheet.css
  1. @font-face {
    2. 

  2. 	font-family: 'amadeus_regularamadeusRg';
    3. 

  3. 	src: url('../fonts/amadeus-webfont.eot');
    4. 

  4. 	src: url('../fonts/amadeus-webfont.eot?#iefix') format('embedded-opentype'), 
    5. 

  5. 	    url('../fonts/amadeus-webfont.woff2') format('woff2'), 
    6. 

  6. 	    url('../fonts/amadeus-webfont.woff') format('woff'), 		url('../fonts/amadeus-webfont.ttf') format('truetype'), 		url('../fonts/amadeus-webfont.svg#amadeus_regularamadeusRg') format('svg');
    7. 

  7. 	font-weight: normal;
    8. 

  8. 	font-style: normal;
    9. 

  9. }

导入小图标字体

index.html

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta charset="utf-8">
    5. 

  5. 		<title></title>
    6. 

  6. 		<link rel="stylesheet" href="../css/style.css" />
    7. 

  7. 	</head>
    8. 

  8. 	<body>
    9. 

  9. 		<div class="icon-firefox"></div>
    10. 

  10. 	</body>
    11. 

  11. </html>
style.css
  1. @font-face {
    2. 

  2. 	font-family: 'icomoon';
    3. 

  3. 	src:url('../fonts/icomoon.eot?7gr0ck');
    4. 

  4. 	src:url('../fonts/icomoon.eot?7gr0ck#iefix') format('embedded-opentype'),
    5. 

  5. 		url('../fonts/icomoon.ttf?7gr0ck') format('truetype'),
    6. 

  6. 		url('../fonts/icomoon.woff?7gr0ck') format('woff'),
    7. 

  7. 		url('../fonts/icomoon.svg?7gr0ck#icomoon') format('svg');
    8. 

  8. 	font-weight: normal;
    9. 

  9. 	font-style: normal;
    10. 

  10. }
    11. 

  11. [class^="icon-"], [class*=" icon-"] {
    12. 

  12.     /* use !important to prevent issues with browser extensions that change fonts */
    13. 

  13. 	font-family: 'icomoon' !important;
    14. 

  14. 	speak: none;
    15. 

  15. 	font-style: normal;
    16. 

  16. 	font-weight: normal;
    17. 

  17. 	font-variant: normal;
    18. 

  18. 	text-transform: none;
    19. 

  19. 	line-height: 1;
    20. 

  20. 	/* Better Font Rendering =========== */
    21. 

  21. 	-webkit-font-smoothing: antialiased;
    22. 

  22. 	-moz-osx-font-smoothing: grayscale;
    23. 

  23. }
    24. 

  24. .icon-film:before {
    25. 

  25. 	content: "\e900";
    26. 

  26. }
    27. 

  27. .icon-envelop:before {
    28. 

  28. 	content: "\1f313";
    29. 

  29. }
    30. 

  30. .icon-smile2:before {
    31. 

  31. 	content: "\e902";
    32. 

  32. }
    33. 

  33. .icon-chrome:before {
    34. 

  34. 	content: "\e903";
    35. 

  35. }
    36. 

  36. .icon-firefox:before {
    37. 

  37. 	content: "\e901";
    38. 

  38. }
    39. 

  39. .icon-IE:before {
    40. 

  40. 	content: "\e904";
    41. 

  41. }
    42. 

  42. .icon-opera:before {
    43. 

  43. 	content: "\e905";
    44. 

  44. }
    45. 

  45. .icon-safari:before {
    46. 

  46. 	content: "\e906";
    47. 

  47. }
    48. 

  48. .icon-IcoMoon:before {
    49. 

  49. 	content: "\e907";
    50. 

  50. }

嵌入web字体的更多相关文章

  1. CSS3之嵌入Web字体

    之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求(如果在多处使用的话),即使合并所有图片,也不好管理,灵 ...

  2. 如何使用Web字体？

    如何使用Web字体 嵌入Web字体的关键是@font-face规则,通过它可以指定浏览器下载web字体的地址,以及如何在样式表中引用该字体 @font-face { font-family: Voll ...

  3. 制作web字体：CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...

  4. 几种web字体格式

    目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...

  5. web设计经验<七>13步打造优雅的WEB字体

    今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...

  6. web字体格式及几种在线格式转换工具介绍

    原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...

  7. 工作笔记——web字体格式转换

    转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体 ...

  8. WEB 字体

    之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求 (如果在多处使用的话),即使合并所有图片,也不好管理, ...

  9. 如何避免由 Web 字体引起的布局偏移

    前言 一些布局上的完全加载前后的变化很容易解决:为动态元素预先分配正确的空间,在图像上使用宽度和高度属性,并优先考虑 HTML 文档中的可见元素.但是,导致布局偏移的还有一个难以解决的问题:无样式文本 ...

随机推荐

  1. 使用ICSharpCode.SharpZipLib+Aspose模板批量导出Word

    由于是Web端的项目,所以点击按钮之后直接从Aspose模板读取数据,然后在内存中操作,而不是下载到本地后再打包弄到内存中下载.废话不多说,直接上代码 public ActionResult Expo ...

  2. Beaglebone Black教程BeagleBone Black安装最新系统映像

    Beaglebone Black教程BeagleBone Black安装最新系统映像 BeagleBone Black安装最新系统映像 Beaglebone Black虽然已经预装了Debian操作系 ...

  3. 【BZOJ 1528】 1528: [POI2005]sam-Toy Cars （贪心+堆）

    1528: [POI2005]sam-Toy Cars Description Jasio 是一个三岁的小男孩,他最喜欢玩玩具了,他有n 个不同的玩具,它们都被放在了很高的架子上所以Jasio 拿不到 ...

  4. CCF 第六次计算机职业认证 第四题 收货 stl动态存储和fleury算法的综合应用

    问题描述 为了增加公司收入,F公司新开设了物流业务.由于F公司在业界的良好口碑,物流业务一开通即受到了消费者的欢迎,物流业务马上遍及了城市的每条街道.然而,F公司现在只安排了小明一个人负责所有街道的服 ...

  5. 【最大团转最大点独立集（匈牙利算法+时间戳优化）】BZOJ2744-[HEOI2012]朋友圈

    [题目大意] 有两个国家A和B.存在以下朋友关系: 1.A国:每个人都有一个友善值,当两个A国人的友善值a.b,如果a xor b mod 2=1,那么这两个人都是朋友,否则不是: 2.B国:每个人都 ...

  6. Activity(活动)生命周期（1）--返回栈

    Android是使用任务(task)来管理活动的,一个任务就是一组存放在栈里的活动的集合,这个栈也被称为返回栈(Back stack).栈是一种后进先出的数据结构,在默认情况下,每当我们启动了一个新的 ...

  7. Codeforces Beta Round #2 A. Winner 水题

    A. Winner 题目连接: http://www.codeforces.com/contest/2/problem/A Description The winner of the card gam ...

  8. HDU 4634 Swipe Bo （2013多校4 1003 搜索）

    Swipe Bo Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  9. Visio中旋转文本框与箭头平行

    如图想要让文本框和箭头平行,按住shift,可以画出水平或者垂直的线,线是斜的,用文本框来标识,要框和线平行,那可以这样做: 打开视图  -  任务窗格 - 大小和位置,然后先单击选中斜线 左下角倒数 ...

  10. 邮件发送过去24小时的自增长事件(MSSQL)

    此脚本需要启用DBMail以支持邮件的发送.可设为每日运行的JOB以追踪自增长事件,以便做出适当的调整. -- Email the Auto-growth events that have occur ...