- 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