- From: 一丝 <yiorsi@gmail.com>
- Date: Thu, 23 Jul 2015 17:48:42 +0800
- To: public-html-ig-zh <public-html-ig-zh@w3.org>
- Message-ID: <CA+-d5Zq3dxX8Zy2XsxR_=U45JBVtm-g9knrqbKXZG+8Zs=UCGw@mail.gmail.com>
@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