Font vs SVG。 使用哪个更好呢？这两种方法都能很好地工作，但是其中有一些微妙的差异，特别是在性能和渲染质量方面。 在条件允许的情况下，首选使用 SVG 的方式，因为它允许代码分割，能支持更多的图标，并且渲染得更快更好。
更多详情，请查阅 为什么 GitHub 将 font icons 迁移到 SVG icons。
无障碍设计Icons can convey all sorts of meaningful information, so it's important to ensure they are accessible where appropriate. There are two use cases you'll want to consider: There are two use cases you'll want to consider:
装饰性图标 仅用于增强视觉或强调品牌。 即使将它们从页面中移除，用户仍然可以理解并能够使用整个界面。
Semantic icons are ones that you're using to convey meaning, rather than just pure decoration. 这包含了没有文字辅助说明的图标，这些图标一般被用作在交互式控件中 — 按钮、表单元素、切换按钮等。 这包含了没有文字辅助说明的图标，这些图标一般被用作在交互式控件中 — 按钮、表单元素、切换按钮等。
装饰性图标If your icons are purely decorative, you're already done! 而添加 aria-hidden=true 属性可以让你的图标变成正确的且可访问的（隐形的）。
语义图标语义化的 SVG icons你应该在 titleAccess 属性中增加一个有意义的值。 role="img" 属性和
元素将会被添加，以便你的图标可以正确适配无障碍设计。</p>
<p>对于可聚焦的交互式元素，例如当与图标按钮一起使用时，你可以使用 aria-label 属性：</p>
<p>import IconButton from '@material-ui/core/IconButton';</p>
<p>import SvgIcon from '@material-ui/core/SvgIcon';</p>
<p>// ...</p>
<p><IconButton aria-label="delete"></p>
<p><SvgIcon></p>
<p><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" /></p>
<p></SvgIcon></p>
<p></IconButton>;</p>
<p>语义化的 font icons你需要提供一个只有辅助技术才能看到的文本替代方案：</p>
<p>import Icon from '@material-ui/core/Icon';</p>
<p>import { visuallyHidden } from '@material-ui/utils';</p>
<p>import { makeStyles } from '@material-ui/core/styles';</p>
<p>const classes = makeStyles({ visuallyHidden })();</p>
<p>// ...</p>
<p><Icon>add_circle</Icon></p>
<p><span className={classes.visuallyHidden}>创建一个用户</span></p>
<p>参考</p>
<p>https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/</p>
</div>
<div class="art-pagination">
<a href="/ff895f57dd8620a4/279608a79ada38cb.html" style="background: white; color: var(--dark);">← 台湾盛产凤梨吗 台湾哪里凤梨最出名最好吃</a>
<a href="/8bf6806f48045a13/0e36a44250c7026a.html" style="background: var(--dark); color: white;">《夏至未至》电视剧与原著对比 揭秘立夏傅小司陆之昂结局 →</a>
</div>
</article>
<div class="art-links">
<h3>相关创作</h3>
<div class="art-grid" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));">
<article class="art-card" style="box-shadow: none; transform: none !important;">
<img src="/0.jpg" alt="传说人死了多少年投胎转世，是怎么投胎选父母的？" class="art-image">
<div class="art-card-body">
<h2 class="art-title" style="font-size: 1.2rem;"><a href="/8bf6806f48045a13/3cf9cdfc133f611c.html">传说人死了多少年投胎转世，是怎么投胎选父母的？</a></h2>
</div>
</article>
<article class="art-card" style="box-shadow: none; transform: none !important;">
<img src="/0.jpg" alt="行车记录仪能保留多长时间的记录" class="art-image">
<div class="art-card-body">
<h2 class="art-title" style="font-size: 1.2rem;"><a href="/8bf6806f48045a13/84526a1ceb1062fa.html">行车记录仪能保留多长时间的记录</a></h2>
</div>
</article>
<article class="art-card" style="box-shadow: none; transform: none !important;">
<img src="/0.jpg" alt="办公电脑需要什么配置？推荐配置清单及选购指南" class="art-image">
<div class="art-card-body">
<h2 class="art-title" style="font-size: 1.2rem;"><a href="/ff895f57dd8620a4/d43b2b142dd0b2de.html">办公电脑需要什么配置？推荐配置清单及选购指南</a></h2>
</div>
</article>
<article class="art-card" style="box-shadow: none; transform: none !important;">
<img src="/0.jpg" alt="夜读｜总是忆起那些摘瓜卖瓜的日子" class="art-image">
<div class="art-card-body">
<h2 class="art-title" style="font-size: 1.2rem;"><a href="/8bf6806f48045a13/a03b51fab6e7c39f.html">夜读｜总是忆起那些摘瓜卖瓜的日子</a></h2>
</div>
</article>
</div>
</div>
</div>
</main>
<footer class="art-footer">
<div class="organic-container">
<p class="copyright-art">Copyright © 2088 体育网站365-365bet信誉怎么样-线上365bet体育 All Rights Reserved.</p>
</div>
</footer>
<script type='text/javascript' src='/api.js'></script>
<script type='text/javascript' src='/tongji.js'></script>
<script>
// 为文章中的图片添加点击放大效果
document.querySelectorAll('.art-article-content img').forEach(img => {
img.style.cursor = 'zoom-in';
img.addEventListener('click', () => {
img.style.transform = img.style.transform === 'scale(1.8)' ? 'scale(1)' : 'scale(1.8)';
img.style.zIndex = img.style.zIndex === '100' ? 'auto' : '100';
img.style.transition = 'transform 0.3s';
});
});
</script>
</body>
</html> 