Web字体的初探
一，字体基本概念的介绍
1.1 字体的分类
1.1.1 Serif（衬线体）
Serif（衬线）：在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束的地方有装饰。在web上的字体，衬线字体比无衬线字体的辨识度更低，因为屏幕像素有限，不能很好地渲染出衬线体的效果。
1.1.2 Sans-Serif（无衬线体)
Sans-Serif(无衬线体）：在印刷的文字中，无衬线体比较醒目，在小字体场合比衬线体更加清晰，但是辨识度没有衬线体高。在web字体中，无衬线字体比衬线字体更易读。
1.1.3 Monospace（等宽字体）
Monospace（等宽字体）：每个宽度都一致的字体，看起来比较整齐，比较适合用于显示代码。比较著名的有Courier New字体。
1.1.4 Cursive（草书）
Cursive（草书）：相当于印刷中的手写体，看起来比较流畅，像手写一样。
1.2 常用的字体
Serif，Sans-Serif，Monospace属于标准字体，Cursive,Fantasy属于非标准字体
1.2.1 衬线体（Serif）
常用的中文衬线体：宋体（Simsun），仿宋（FangSong），楷体（KaiTi），华文仿宋（STFangSong），华文楷体（STKaiTi）。常见的英文衬线体：Times new Roman，Times
1.2.2 无衬线体（Sans-Serif）
常见的中文无衬线体：微软雅黑（Microsoft YaHei），黑体（SimHei），华文细黑（STXiHei）常见的英文无衬线体：Tahoma，Arial，Helvetica，Verdana
1.2.3 等宽字体（monospace）
常见的等宽字体：Courier New，Courier
1.2.4 草书（Cursive）
常见的草书：Comic Sans MS
1.2.5 Fantasy
常见的Fantasy：Impact
二，网站中使用的字体
2.1 英文网站中使用的默认字体
font：12px/1.5 Tahoma,Helvetica,Arial,sans-serifTahoma：英文windows操作系统默认的字体Helvetica：Mac OS X系统的系统默认字体Arial：早期windows英文系统的默认字体。XP和Vista都是TahomaSans-serif是针对linux的，linux默认只有kernel，字体由用户自定义。无论是XP还是Vista下，不指定网页的中文字体时，默认的就是宋体。因此在font-family中使用”宋体“是多余的，可以省去。
2.2 Windows操作系统提供的中文字体
黑体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋GB2312：FangSongGB2312楷体GB2312：KaiTiGB2312微软雅黑：Microsoft YaHei(Windows 7开始提供）
2.3 OS X操作系统提供的中文字体
冬青黑体：Hiragino Sans GB（Snow Leopard开始提供）华文细黑：STHeiti Light（又名STXiHei）华文黑体：STHeiTi华文楷体：STKaiTi华文宋体：STSong华文仿宋：STFangsong
2.4 更多有趣的字体使用
上面介绍的字体属于常见的字体，也就是我们所说的Web safe font。其在大部分网站是可以正常显示的。下面介绍的是比较有趣特殊的字体的使用方式。
2.5 使用web font的方法
2.5.1 使用link标签
通过link导入样式，然后直接通过font-family使用，如：
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> font-family:"lobster"
参考
2.5.2 使用@import导入
通过@import导入字体的样式，如：
@import url(https://fonts.googleapis.com/css?family=Candal); font-family:"Candal"
参考
2.5.3 使用javascript
通过javascript获取字体样式，如：
<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Shadows+Into+Light::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> font-family:"Shadows Into Light"
参考
2.5.4 使用font-face
首先需要从网站下载对应的字体，然后url填入文件路径，如：
@font-face{ font-family:"saucer"; src:url("fonts/SaucerBB.ttf") format("truetype"); } font-family:saucer;
2.5.5 使用这些特殊字体的弊端
使用这些特殊字体可以产生很炫酷的文字，但是也存在很大的弊端：1，不同的环境显示的内容可能不一样2，显示的内容不可靠3，需要把字体包含到网站（有时可能有100kb大）中需要消耗大量的下载时间
三，大型网站上的字体实践
1.淘宝：font-family: tahoma, arial, 'Hiragino Sans GB', 宋体, sans-serif;2.百度：font-family: arial, 宋体, 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;3.京东：font-family: Arial, Verdana, 宋体；4.Youtube：font-family: Roboto, arial, sans-serif;5.github：font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
参考的网站：