CSS3引入字体库font-family

文章目录

• 一、参考
• 二、问题描述
• 三、快速入门
• 字体格式
• 字体的兼容性解决办法

一、参考

1. CSS 调用远程字体

二、问题描述

工作中，设计师经常为了界面优美好看，会使用一些“个性化”的字体，由于使用者的浏览器不一定会安装对应的字体，因此代码写了字体体现不出来，如果挨个去给用户安装字体也不现实。

解决办法： 浏览器引入字体库，然后使用引入的字体 。

三、快速入门

@font-face { 
  font-family: SketchRockwell;  
  src: url('SketchRockwell.ttf');  
   
  
} 
.my_CSS3_class { 
  font-family: SketchRockwell;  
  font-size: 3.2em;  
} 

字体格式

1. TrueType（.ttf）格式 。

.ttf 字体是 Windows 和 Mac 的最常见的字体，是一种 RAW 格式。

2. OpenType（.otf）格式

.otf 字体被认为是一种原始的字体格式，其内置在 TrueType 的基础上，提供了更多的功能。

3. Web Open Font Format（.woff）格式

.woff 字体是 Web 字体中最佳格式，是一个 TrueType 的压缩版本，同时也支持原数据包的分离。

4. Embedded Open Type（.eot）格式

.eot 字体是 IE 专用字体 ，可以从 TrueType 创建此格式字体。

5. SVG（.svg）格式

.svg 字体是基于 SVG 字体渲染的一种格式。

字体的兼容性解决办法

@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); 
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/iconfont.woff') format('woff'), 
  url('../fonts/iconfont.ttf') format('truetype'), 
  url('../fonts/iconfont.svg#iconfont') format('svg'); 
}

@font-face {font-family: "iconfont";
	src: url('../fonts/iconfont.eot');
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'); 
	src: url('../fonts/iconfont.woff') format('woff'); 
	src: url('../fonts/iconfont.ttf') format('truetype'); 
  	src: url('../fonts/iconfont.svg#iconfont') format('svg'); 
}