@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. 洛谷——P1862 输油管道问题

    P1862 输油管道问题 题目背景 听说最近石油危机 所以想到了这题 题目描述 某石油公司计划建造一条由东向西的主要输油管道.该管道要穿过一个有n口油井的油田.从每口油井都要有一条输油管道沿最短路径( ...

  2. 【UOJ #131】【NOI 2015】品酒大会

    http://uoj.ac/problem/131 求出后缀数组和height数组后,从大到小扫相似度进行合并,每次相当于合并两个紧挨着的区间. 合并区间可以用并查集来实现,每个区间的信息都记录在这个 ...

  3. hdu 5692 Snacks(dfs时间戳+线段树）

    Snacks Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  4. [BZOJ3131] [Sdoi2013]淘金

    [BZOJ3131] [Sdoi2013]淘金 Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐 ...

  5. [Codeforces-div.1 24D] Broken robots

    [Codeforces-div.1 24D] Broken robots 试题分析 显然设\(f_{i,j}\)为到\((i,j)\)的期望步数,将转移表达式列出来. 首先自己跟自己的项消掉. 然后规 ...

  6. [SRM686]CyclesNumber

    题意:求$n$个数的所有排列形成的轮换个数的$m$次方之和 我以前只知道这是GDKOI的题,今天在ckw博客上发现它是TC题...原题真是哪里都有... 就是求$\sum\limits_{i=1}^n ...

  7. 【二分】【字符串哈希】【二分图最大匹配】【最大流】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem I. Minimum Prefix

    给你n个字符串,问你最小的长度的前缀,使得每个字符串任意循环滑动之后,这些前缀都两两不同. 二分答案mid之后,将每个字符串长度为mid的循环子串都哈希出来,相当于对每个字符串,找一个与其他字符串所选 ...

  8. 【最大权闭合图】BZOJ1565-[NOI2009]植物大战僵尸

    害怕地发现我以前写的Dinic几乎都是有错的……??!!! [题目大意] (以下摘自popoqqq大爷)给定一个m*n的草坪,每块草坪上的植物有两个属性:1.啃掉这个植物,获得收益x(可正可负)2.保 ...

  9. 【centOS】【xshell】xshell连接虚拟机上的centOS，操作途中突然断开连接，报错：connect closed by foreign host

    如题  xshell连接虚拟机上的centOS,操作途中突然断开连接,报错:connect closed by foreign host 快捷解决方法: 在虚拟机上centOS重新启动网络,即可解决问 ...

  10. 二十四种设计模式：模板方法模式(Template Method Pattern)

    模板方法模式(Template Method Pattern) 介绍定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.Template Method使得子类可以不改变一个算法的结构即可重定义该算法 ...