web字体

[mrbone]

icon-font

1. 只能单色
2. 支持svg

aria-hidden

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.

If an element is only visible after some user action, authors MUST set the aria-hidden attribute to true. When the element is presented, authors MUST set the aria-hidden attribute to false or remove the attribute, indicating that the element is visible. Some assistive technologies access WAI-ARIA information directly through the DOM and not through platform accessibility supported by the browser. Authors MUST set aria-hidden="true" on content that is not displayed, regardless of the mechanism used to hide it. This allows assistive technologies or user agents to properly skip hidden elements in the document.

如果该元素是需要一定交互之后才显示，则一开始其 aria-hidden 需要设置为 true，当元素显示之后需要移除 aria-hidden 或者将其设为 false。

给予残障人士辅助阅读的程序会跳过 aria-hidden 的元素。

可访问性 - Accessibility

icons 应该分为两类:

• Decorative icons (装饰性图标) - 视觉或品牌类图标，这类图标如果被移除掉不会影响用户使用/理解你的页面。
• Semantic icons - 不仅仅用来装饰，而有表义的功能的 icons。 包含没有文字并有交互效果的图标 -- 按钮，表单，开关等等。

iconmoon

1. 导出 svg。
2. import 到 icon-moon。
3. 下载字体，添加对应 class。

webfonts-generator/icon-font-generator

都是 npm 上的生成 icon-font 的工具。

原理

可以看到 icon-font 的原理是使用 font-face 属性，并且内容是特定 unicode 的时候会变成对应字体。

viewbox

viewbox 是包含 min-x, min-y, width, height 四个值的字符串,用逗号或者空格分隔。

width 和 height 为非负数值，如果设为 0 则表示不 render 这个元素。

上述关于 min-x min-y 的描述来自 MDN，另外的说法是前两个值是 x, y 坐标，在 chrome 下验证这个说法是正确的。