呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#书摘 #css #前端
《CSS 世界》font-face 中的src
「接下来解答#iefix有什么用的问题。实际上，#iefix是没什么用的！“你在开玩笑吗？”没有，这里的#iefix 确实没什么用，真正有用的其实是前面的问号。IE9之前的版本解析有一个严重的问题，当src属性包含多个 url()时，会把长长的字符当作一个地址解析而返回 404 错误。
因此把 eot 格式放在第一位，然后在字体文件 url 地址后加上问号，这样IE9之前的版本会把问号之后的内容当作 url 的参数。好吧，#iefix 严格来说还是有点儿用的，它可以让请求地址短一些，因此请求地址是不包括锚点标志#及其后面的内容的。
如果按照这种说法，那岂不是说iefix 这几个字符多余？没错，多余！不懂的人不知道是干什么用的，懂的人知道它是没什么用的，因此多余。」6

最后的问题是：format()功能符有什么作用，可不可以省略？我的回答是最好不要省略。format()功能符的作用是让浏览器提前知道字体的格式，以决定是否需要加载这个字体，而不是加载完了之后再自动判断。

于是，综合上面的全部知识会发现，业界常用的这套东西，其实可以优化成下面这样：
@font-face {
font-family: ICON;
src: url('icon.eot');
src: local('☺'),
url('icon.woff2') format("woff2"),
url('icon.woff') format("woff"),
url('icon.ttf');
}
有一种一周瘦10斤的感觉。
书摘 css 前端 iefix是没什么用的 iefix
《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格式果断舍弃。
说来说去还得是兼容，哎
iefix
 
 
Back to Top