《CSS 世界》font-face 中的src
@font-face {
font-family: ICON;
src: url('icon.eot') format('eot');
src: url('icon.eot?#iefix') format('embedded-opentype'),
url('icon.woff2') format("woff2") url('icon.woff') format("woff"),
url('icon.ttf') format("typetrue"), url('icon.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}
先解答一下字体格式的问题。上面这段 CSS 代码一共出现了 5 种字体格式，分别是.eot、.woff2、.woff、.ttf和.svg。
1. svg格式是为了兼容iOS 4.1及其之前的版本，考虑到现如今iOS的版本数已经翻了一番，所以svg格式的兼容代码大可舍弃。
2. eot格式是IE私有的。注意，目前所有版本的IE浏览器都支持eot格式，并不是只有IE6～IE8支持。只是，IE6～IE8仅支持eot这一种字体格式。
3. woff是web open font format几个词的首字母简写，是专门为Web 开发而设计的字体式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4开始全面支持。
4. woff2是比woff尺寸更小的字体，小得非常明显。因此，Web 开发第一首选字体就是woff2，只是此字体目前仅Chrome和Firefox支持得比较好。
5. ttf 格式作为系统安装字体比较多，Web 开发也能用，就是尺寸大了点儿，优点在于老版本Android也支持。
综合上面的分析，我们可以得到如下的结论。
（1）svg格式果断舍弃。
（2）如果无须兼容IE8浏览器，eot格式果断舍弃。
（3）如果无须兼容Android 4.3之前版本手机，ttf格式果断舍弃。
说来说去还得是兼容，哎
@font-face {
font-family: ICON;
src: url('icon.eot') format('eot');
src: url('icon.eot?#iefix') format('embedded-opentype'),
url('icon.woff2') format("woff2") url('icon.woff') format("woff"),
url('icon.ttf') format("typetrue"), url('icon.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}
先解答一下字体格式的问题。上面这段 CSS 代码一共出现了 5 种字体格式，分别是.eot、.woff2、.woff、.ttf和.svg。
1. svg格式是为了兼容iOS 4.1及其之前的版本，考虑到现如今iOS的版本数已经翻了一番，所以svg格式的兼容代码大可舍弃。
2. eot格式是IE私有的。注意，目前所有版本的IE浏览器都支持eot格式，并不是只有IE6～IE8支持。只是，IE6～IE8仅支持eot这一种字体格式。
3. woff是web open font format几个词的首字母简写，是专门为Web 开发而设计的字体式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4开始全面支持。
4. woff2是比woff尺寸更小的字体，小得非常明显。因此，Web 开发第一首选字体就是woff2，只是此字体目前仅Chrome和Firefox支持得比较好。
5. ttf 格式作为系统安装字体比较多，Web 开发也能用，就是尺寸大了点儿，优点在于老版本Android也支持。
综合上面的分析，我们可以得到如下的结论。
（1）svg格式果断舍弃。
（2）如果无须兼容IE8浏览器，eot格式果断舍弃。
（3）如果无须兼容Android 4.3之前版本手机，ttf格式果断舍弃。
说来说去还得是兼容，哎
