[css3-fonts]@font-face 中应该禁用 !important 提升权重

    @font-face {
        font-family: iconfont !important;
        font-family: foo;
        font-weight: 300;
        font-style: normal;
        src: url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.eot");
        src: url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.eot?#iefix")
format("embedded-opentype"),
            url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.woff")
format("woff"),
            url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.ttf")
format("truetype"),
            url("http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont.svg#iconfont")
format("svg");
    }

Demo:http://jsbin.com/baveqahobu/edit?html,output


Demo 中的字符在 Chrome 44 之后版本没有渲染成指定字体图标,不符合用户预期。

测试发现  !important 会导致整条规则失效(没找到相关 bug,如果有找到的麻烦告知一下)。类似的,Opera 在12.1
版本中也是同样如此。然而,规范中并没有描述关于 @font-face 中关于 !important 规则的作用。

实际上,我觉得规范应该阐明 @font-face 中应该忽略 !important
规则提升权重的作用,但不应该使整条声明失效。类似的,在@font-face 中的其他属性值中的声明也做同样处理。

历史讨论:https://lists.w3.org/Archives/Public/www-style/2010Sep/0409.html


以上
一丝

Received on Thursday, 23 July 2015 09:49:29 UTC