@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. CodeForces888E Maximum Subsequence（折半枚举+two-pointers）

    题意 给定一个包含\(n\)个数的序列\(a\),在其中任选若干个数,使得他们的和对\(m\)取模后最大.(\(n\leq 35\)) 题解 显然,\(2^n\)的暴枚是不现实的...,于是我们想到了 ...

  2. Elasticsearch match_phrase用法

    目前有用到的用法如下: post /index_name/_search { "query" : { "match_phrase": { "nickn ...

  3. 【webssh】shellinabox搭建

    shellinabox搭建 centos环境安装命令 # yum install epel-release # yum install shellinabox 启动与关闭: service shell ...

  4. Cobol online program 传指针

  5. Visual Studio Xamarin提示Bonjour backend初始化失败

    Visual Studio Xamarin提示Bonjour backend初始化失败 错误信息:The Bonjour backend failed to initialize, automatic ...

  6. python 日历（Calendar）模块

    另附一篇文章:http://www.jb51.net/article/77971.htm 序号 函数及描述 1． calendar.calendar(year,w=2,l=1,c=6) 返回一个多行字 ...

  7. Android，几款apk工具

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 可以查看到链接的设备 可以查看到wifi密码,这个也是个开源的 可以查询驾照学时进度 可 ...

  8. [BZOJ4836]二元运算(分治FFT)

    4836: [Lydsy1704月赛]二元运算 Time Limit: 8 Sec  Memory Limit: 128 MBSubmit: 578  Solved: 202[Submit][Stat ...

  9. POJ 2404 Jogging Trails（最小权完美匹配）

    [题目链接] http://poj.org/problem?id=2404 [题目大意] 给出一张图,求走遍所有的路径至少一次,并且回到出发点所需要走的最短路程 [题解] 如果图中所有点为偶点,那么一 ...

  10. 【线段树】hdu6183 Color it

    题意: 维护一个数据结构,支持三种操作: ①在平面上(x,y)处添加一个颜色为c的点. ②询问平面上(1,y1)-(x,y2)范围内,有多少种不同颜色的点. ③清除平面上所有点. 颜色数量很少,对于每 ...