网站字体

网站字体时常会涉及到侵权的问题，所以为了避免字体侵权，大多数网站都采用自己下载的字体。css针对网站引用自己的字体有专门的规定。

@font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/

src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('emotion.woff') format('woff'), /* chrome、firefox */

url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */ }

其中emotion为自己下载的字体名称； emotion.eot、emotion.woff、emotion.ttf、emotion.svg为下载的字体包含的格式。

url('emotion.eot?#iefix') format('embedded-opentype') 中?#iefix的解释： #iefix有何作用？

IE9 之前的版本没有按照标准解析字体声明，当 src 属性包含多个 url 时，它无法正确的解析而返回 404 错误，而其他浏览器会自动采用自己适用的 url。

因此把仅 IE9 之前支持的 EOT 格式放在第一位，然后在 url 后加上 ?，这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。

至于 #iefix 的作用，一是起到了注释的作用，二是可以将 url 参数变为锚点，减少发送给服务器的字符。 为何有两个src？ 绝大多数情况下，第一个 src 是可以去掉的，除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面，微软修改了在兼容模式下的 CSS 解析器，导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的，所以在上面添加一个不带问号的 src 属性便可以解决此问题。