css系列之关于字体的事

Web Font

字体类型与格式

按照字体的描述方式来分：
点阵字体
矢量字体（轮廓字体）

按照字体的表现形式来分：
衬线字体（serif）：好比，宋体，Georgia，Times New Roman
非衬线字体（sans-serif）:好比 Tahoma, Arial , 幼圆
其它字体：等宽字体（monospace）,书写体（cursive）,梦幻体（fantasy）

@font-face

语法

@font-face的取值有如下几个：
font-family：设置文本的字体名称。以后能够在定义字体的字体栈中使用这个名称。
font-style：设置文本样式
font-variant：设置文本是否大小写
font-weight：设置文本的粗细
font-stretch：设置文本是否横向拉伸变形
font-size：设置文本字体大小
src：设置自定义字体的相对路径或者绝对路径。
注意：此属性只能在@font-face规则里使用。

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

浏览器支持度

不一样的浏览器会要求不一样的字体文件类型:
TrueType（TTF）和OpenType（OTF）字体文件在绝大多数的浏览器上都能正常工做。
IE4—IE8要求使用特殊的字体文件格式：嵌入式OpenType（EOT）
惟一可以在Safari上正常工做的字体文件格式就是SVG，SVG在chrome、Opera上也能正常工做，但在Firefox上不行。
WOFF的含义是Web开放字体格式。愈来愈多的浏览器都在添加对它的支持。
这些字体格式中的一些可以互相转换。
通常在font-face中都引入各个类型的字体文件以适配全部浏览器。

/* 声明字体(图标字体) */
        @font-face {
            font-family: 'webfont';
            src: url('font/webfont.eot');  /* IE9 */
            src: url('font/webfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
            url('font/webfont.woff') format('woff'),   /* chrome、firefox */
            url('font/webfont.ttf') format('truetype'),    /* chrome、firefox、opera、Safari、Android、IOS */
            url('font/webfont.svg#webfont') format('svg');   /* ios 4.1 */
        }
 
        .myfont {
            font-family: 'webfont';  /* 使用声明的字体 */
        }

选择字体须要注意的问题

一、字体的中英文写法：

咱们在操做系统中经常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，通常字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数状况下直接使用显示名称也能正确的显示，可是有一些用户的特殊设置会致使中文声明无效。
所以，保守的作法是使用字体的字体名称（英文）或者二者兼写。以下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";
二、声明英文字体：

绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，可是大多数中文字体中的英文和数字的部分都不是特别漂亮，因此建议也对英文字体进行声明。
因为英文字体中大多不包含中文，咱们能够先进行英文字体的声明，这样不会影响到中文字体的选择，所以优先使用最优秀的英文字体，中文字体声明则紧随其次。以下示例：

font-family: Arial, "Microsoft YaHei";
三、照顾不一样的操做系统：

英文、数字部分：在默认的操做系统中，Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体，从显示效果来看，Tahoma要比Arial更加清晰一些，所以字体设置Tahoma最好放到前面，当找不到Tahoma时再使用Arial；而在Mac中，还拥有一款更加漂亮的Helvetica字体，因此为了照顾Mac用户有更好的体验，应该更优先设置Helvetica字体；Android系统下默认的无衬线字体就能够接受，所以无需单独设置。最后，英文、数字字体的最佳写法以下：
font-family: Helvetica, Tahoma, Arial;
中文部分：在Win下，微软雅黑为大部分人最常使用的中文字体，因为不少人安装Office的缘故，Mac电脑中也会出现微软雅黑字体，所以把显示效果不错的微软雅黑加入到字体列表是个不错的选择；一样，为了保证Mac中更为优雅字体苹方（PingFang SC）、黑体-简（Heiti SC）、冬青黑体（ Hiragino Sans GB ）的优先显示，须要把这些字体放到中文字体列表的最前面；同时为了照顾到Linux操做系统的体验，还须要添加文泉驿微米黑字体。最后，中文字体部分最佳写法以下：
font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
中英文整合写法：

font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
四、注意向下兼容

若是还须要考虑旧版本操做系统用户的话，不得不加上一些旧版操做系统存在的字体：Mac中的华文黑体、冬青黑体，Win中的黑体等。一样按照显示效果排列在列表后面，写法以下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";
加入了 STXihei（华文细黑）和 SimHei（黑体）。

五、补充字体族名称

字体族大致上分为两类：sans-serif（无衬线体）和serif（衬线体），当全部的字体都找不到时，咱们可使用字体族名称做为操做系统最后选择字体的方向。通常非衬线字体在显示器中的显示效果会比较好，所以咱们须要在最后添加 sans-serif，写法以下：。

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
六、lang及charset
影响默认字体。
lang 属性规定元素内容的语言。

charset 属性能够经过任意元素上的 lang 属性来重写。

参考连接

真正了解CSS3背景下的@font face规则
Web 字体应用指南最佳实践修炼之道（上）
给本身的Fonts教程