聊聊web字体那些事儿

如何让web应用更加有特点，并忠诚于UI的设计思路及美感，字体一直都是重中之重，特别是对于纷繁的中文字体，要想应用好它们，就需要了解web字体的相关知识。合适的优秀的舒服的字体会让应用更加有吸引力！但随之带来的加载效率性能问题也同样需要关注，鱼和熊掌不可兼得，合适，找到平衡的那一点！

1、字体格式

• ttf格式(TrueType)
  • 最常用的字体格式。由一种数学模式来进行定义的基于轮廓的字体，使得比基于矢量的字体更容易处理，效果与矢量自已一样，保证屏幕与打印输出的一致性，几乎支持所有设备进行输出。
• otf格式(OpenType)
  • 相当于ttf格式的升级版，可以说是用来代替ttf的新字型，增强的跨平台功能，更好的支持Unicode标准定义的国际字符集，支持高级印刷控制能力。
• eot格式(Embedded Open Type)
  • 嵌入字体格式，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，这些文件只在当前页活动的状态下，临时安装在用户的系统中。
• woff格式(Web Open Font Format)
  • 一种专门为了 Web 而设计的字体格式标准，只是对于 ttf / otf 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。
• woff2格式(Web Open Font Format2)
  • 这个规范被开发来提供改进的压缩从而降低网络带宽的使用，同时即使在移动设备上仍然允许快速解压。与woff 1.0中使用的Flate压缩相比，这是通过合并一个内容感知预处理步骤和改进的熵编码来实现的。
• svg格式(Scalable Vector Graphics)
  • 可缩放矢量图形，基于XML的，用于描述二维矢量图形的一种图形格式。

2、兼容性

常用的格式TTF EOT WOFF（推荐） SVG四种即可

3、字体格式转换（工具）

• fontsquirrel
• 字客网
• Font2Web
• FontfaceGenerator
• iconfont在线字体，下载即可用
• envato这个也可以试着看下
• convertio(收费)

4、字体使用

详解看这里

/* 功能模块 font-face */
@font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('YourWebFontName.woff2') format('woff2'),
	     url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
	     url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
	font-weight: bold;
}
body { font-family: "YourWebFontName" }
/**
 * a.src属性定义字体的下载地址，local表示本机地址，url表示网址（比如使用服务器上下载的字体）
 * b.如果在src上定义了多种字体，它们是候选关系
 * c.如果修改了src中定义的字体或者顺序，一定要关闭浏览器再打开才能看到修改后的效果，刷新是看不到的。
 * d.在@font-face规则中。font-family的作用是声明字体变量，与普通选择器中的font-family是不一样的。
 */

5、图标字体（iconfont、fontawesome）

记得以前没有使用图标字体的时候，用雪碧图切啊，摆啊，很是痛苦，图标字体的出现大大地方便了icon等的处理，使用方法：iconfont里面创建项目，添加图标，生成在线字体或者可下载至本地（可以自己用AI进行制作图标，然后上传形成自己的图标库）。

fontawesome 可以直接参考文档进行使用即可，图标还是蛮精致的

6、其它

• windows下安装TTF
  

参考资料：

1、https://blog.csdn.net/xiaolongtotop/article/details/8316554