@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. 从Linux下载文件到Windows没有换行问题

    这是一个小问题,一般用txt打开文件才会遇到,word打开也是正常(估计其他编程软件打开也正常). 顺便提一下pscp从Linux上下载文件到Windows. C:\Users\xuefei>p ...

  2. 【BZOJ 4104】【THUSC 2015】解密运算

    http://www.lydsy.com/JudgeOnline/problem.php?id=4104 网上题解满天飞,我也懒得写了 #include<cstdio> #include& ...

  3. JZYZOJ1535 [haoi2014]穿越封锁线

    http://172.20.6.3/Problem_Show.asp?id=1535 整体来说是道水题,但是穿过点的判定把我坑得wa了两次,考场上这可是40分的水分啊啊啊. 开始的错误想法:排序后向上 ...

  4. BZOJ 3343：教主的魔法（分块）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3343 [题目大意] 给出一个数列,有区间加法操作,询问区间大于等于c的数字个数 [题解 ...

  5. 【深度优先搜索】mr353-取奶

    应该是USACO的题目,暂时没有找到对应出处. [题目大意] 农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位——译者注) 他的最好的牛奶,并把它装 ...

  6. 【递推+高精度】POJ2506-Tiling

    思路别人那里讲的很清楚了,我就不阐述了.链接 #include<iostream> #include<cstdio> #include<cmath> #includ ...

  7. Android手机 "已安装了存在签名冲突的同名数据包"

    如果你不是开发者:如果你在android上更新一个已经安装过较早版本软件时,安装到最后一步提示你:已安装了存在签名冲突的同名数据包,然后安装失败.这是因为旧版软件的签名信息与新版不一致造成的.你可以卸 ...

  8. Codeforces Beta Round #3 B. Lorry 暴力 二分

    B. Lorry 题目连接: http://www.codeforces.com/contest/3/problem/B Description A group of tourists is goin ...

  9. Express重定向

    var express = require('express'); var app = express(); app.get('/',function(req,res){ res.redirect(' ...

  10. 通过命名管道协议方式访问群集SQL的一个小问题

    原来的单机实例SQL如果开放命名管道协议访问可以在.Net程序的连接字符串中增加“;Net=dbnmpntw"以通过命名管道协议方式访问,但是当迁移到群集SQL后,.net通过它可能无法正常 ...