@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. HDU 5862 Counting Intersections（离散化 + 树状数组）

    Counting Intersections Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  2. win10安装mysql8.0.15

    1:下载mysql8.0.15 https://www.mysql.com/downloads/ 2:下载完解压,增加my.ini配置文件 [mysqld] # 设置3306端口 port= # 设置 ...

  3. MYSQL注入天书之基础知识

    第一部分/page-1 Basic Challenges Background-1 基础知识 此处介绍一些mysql注入的一些基础知识. (1)注入的分类---仁者见仁,智者见智. 下面这个是阿德玛表 ...

  4. 【BZOJ 2186】 2186: [Sdoi2008]沙拉公主的困惑 （欧拉筛，线性求逆元）

    2186: [Sdoi2008]沙拉公主的困惑 Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞 ...

  5. [BZOJ3224]普通平衡树(旋转treap,STL-vector)

    3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 20328  Solved: 8979[Submit][St ...

  6. [BZOJ4765]普通计算姬(分块+树状数组)

    4765: 普通计算姬 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 1725  Solved: 376[Submit][Status][Discus ...

  7. 【树形dp】Godfather

    [POJ3107]Godfather Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7212   Accepted: 253 ...

  8. 【BFS/DFS/YY】派对灯

    [luogu1468]派对灯 题目描述 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码. 这些灯都连接到四个按钮: 按钮1:当按下此按钮,将 ...

  9. [转]web.xml中webAppRootKey

    web.xml中webAppRootKey ------------------------------------------------------------------------------ ...

  10. CDOJ 1281 暴兵的卿学姐 构造题

    暴兵的卿学姐 题目连接: http://acm.uestc.edu.cn/#/problem/show/1281 Description 沈宝宝又和卿学姐开始玩SC2了! 自从沈宝宝学会新的阵型后,就 ...