Har*_*San 1 css unicode icons font-face pseudo-element
我最近一直在阅读很多关于字体图标的内容,几乎我看到的每个网站都使用:before和:after伪元素结合content属性将字体图标插入到DOM中.
但是,我没有看到将这些伪元素用于字体图标的优势.其实,我觉得有两个大的缺点,以利用他们::before和:after在IE7及以下不支持,并可能很难用它们来定位内容.
因此,我的问题是:为什么要使用:before并:after根本不将字体图标插入DOM？我当时认为它可能与屏幕阅读器有关,但是现在,所有字体图标服务(如IcoMoon)似乎都将字体图标分配给Unicode PUA(私人使用区域)中的代码点,这些(从我听到的内容) ),屏幕阅读器无论如何都不会大声朗读.
对我来说,使用像HTML这样的HTML实体简单地将字体图标添加到标记中似乎更容易,更符合跨浏览器.
重新解释一下这个问题:大多数人使用:before和:after字体图标的具体原因是什么？非常感谢你.
这是一个非常理论上的差异.
这个想法是生成的内容不被视为文档的一部分,并且没有语义价值.处理页面内容的代理应该忽略它,例如搜索引擎和音频页面阅读器(真正的屏幕阅读器实际上做的不一定总是那么干净,但这是另一个故事).
这使得它非常适合您想要添加没有语义内容的视觉装饰,这是图标字体的正确使用.这与使用背景图像突出显示某个项目或带有图像的图像没有什么不同alt="".
如果你只是在一个页面中写,那么理论上它确实具有语义内容......只是没有任何明确定义的语义内容,它是"奇怪的未知字符".虽然它不应该意味着任何东西,它可能对特定社区有用(U + E000可能被认为是符文或Tux的图片),因此可能会被某些工具不恰当地对待.
(所有这一切都落后于人们确实使用图标字体而不是装饰,以表示文档内容未传达的有意义的差异.而且由于FontAwesome自己的示例页面包含这种无法访问的滥用行为,因此人们做的事情就不足为奇了那些.网页设计师是视觉动物,你可以引导他们使用适合语义的工具,但你不能让他们在语义上思考.)