嵌入web字体

@font-face模块

        可以帮助我们轻松解决Web页面中使用优雅字体的方式，而且我们可以根据需要自定义多种字体，但是每个@font-face只能定义一种，若需要多个字体就启用多个@font-face规则。
        @font-face 主要就是把自己想要的，或者自己定义的Web字体嵌入到Web页面中，然后这些字体就会被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存，使用它来修饰文本。也就是我们所说的Web字体嵌入。

描述符值描述
font-familyname必需。规定字体的名称。
srcURL必需。定义字体文件的 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-rangeunicode-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. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title></title>
  6. 	<link rel="stylesheet" href="../css/stylesheet.css" />
  7. 	<style>
  8. 		div{
  9. 			font-family: amadeus_regularamadeusRg;
  10. 		}
  11. 	</style>
  12. </head>
  13. <body>
  14. 	<div>staven</div>
  15. </body>
  16. </html>
stylesheet.css
  1. @font-face {
  2. 	font-family: 'amadeus_regularamadeusRg';
  3. 	src: url('../fonts/amadeus-webfont.eot');
  4. 	src: url('../fonts/amadeus-webfont.eot?#iefix') format('embedded-opentype'), 
  5. 	    url('../fonts/amadeus-webfont.woff2') format('woff2'), 
  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. 	font-weight: normal;
  8. 	font-style: normal;
  9. }

导入小图标字体

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="../css/style.css" />
  7. 	</head>
  8. 	<body>
  9. 		<div class="icon-firefox"></div>
  10. 	</body>
  11. </html>
style.css
  1. @font-face {
  2. 	font-family: 'icomoon';
  3. 	src:url('../fonts/icomoon.eot?7gr0ck');
  4. 	src:url('../fonts/icomoon.eot?7gr0ck#iefix') format('embedded-opentype'),
  5. 		url('../fonts/icomoon.ttf?7gr0ck') format('truetype'),
  6. 		url('../fonts/icomoon.woff?7gr0ck') format('woff'),
  7. 		url('../fonts/icomoon.svg?7gr0ck#icomoon') format('svg');
  8. 	font-weight: normal;
  9. 	font-style: normal;
  10. }
  11. [class^="icon-"], [class*=" icon-"] {
  12.     /* use !important to prevent issues with browser extensions that change fonts */
  13. 	font-family: 'icomoon' !important;
  14. 	speak: none;
  15. 	font-style: normal;
  16. 	font-weight: normal;
  17. 	font-variant: normal;
  18. 	text-transform: none;
  19. 	line-height: 1;
  20. 	/* Better Font Rendering =========== */
  21. 	-webkit-font-smoothing: antialiased;
  22. 	-moz-osx-font-smoothing: grayscale;
  23. }
  24. .icon-film:before {
  25. 	content: "\e900";
  26. }
  27. .icon-envelop:before {
  28. 	content: "\1f313";
  29. }
  30. .icon-smile2:before {
  31. 	content: "\e902";
  32. }
  33. .icon-chrome:before {
  34. 	content: "\e903";
  35. }
  36. .icon-firefox:before {
  37. 	content: "\e901";
  38. }
  39. .icon-IE:before {
  40. 	content: "\e904";
  41. }
  42. .icon-opera:before {
  43. 	content: "\e905";
  44. }
  45. .icon-safari:before {
  46. 	content: "\e906";
  47. }
  48. .icon-IcoMoon:before {
  49. 	content: "\e907";
  50. }





posted @ 2015-09-08 16:06  staven  阅读(2720)  评论(0)  编辑  收藏  举报