典型的@font-face 设置:
@font-face {
font-family: 'myFont';
src: url('/fonts/myFont.woff') format('woff'),
url('/fonts/myFont.ttf') format('ttf'),
url('/fonts/myFont.svg') format('svg'),
url('/fonts/myFont.eot') format('eot')
}
现在,我们有了 IE 9 +的定义,它转换为"现代浏览器"。 看看字体类型的支持,它是一个巨大的混乱,虽然,看起来是用来。 查看站点"我可以用",所有的现代浏览器都支持woff和svg格式。
那么为什么我们要添加这三种格式,我们只需要一个,现代浏览器都支持woff或者 svg? 我不明白的是订单的问题。 所以在示例 above 中,所有现代浏览器都将下载"woff"格式。 不需要添加 svg 。 那我们为什么要这样做?
这个问题的background 是 inline 优化。 如果我想把字体当作Base64字符串,那么这不是很好的"optimizely",这将只会使CSS不必要的大的大。
如果目标是"现代浏览器",只需选择字体支持的格式并坚持。 不要忘记web上"每个例子"的回退使用。
或许有些格式在某些浏览器中比其他格式更好,但是,因为浏览器会在你的font-face 列表中只下载第一个支持格式,或者在你的列表中,如果你不关心 IE,那么ttf将是第一个。
所以我在这里做了一些假设。 有什么理由把它们都加起来? 大多数情况下,使用woff或者 svg?