Google 소재 아이콘 글꼴 - 전체 브라우저 지원 가이드?

Question

Google의 소재 아이콘 https://design.google.com/icons/을 글꼴로 사용하고 싶지만 브라우저 지원이 걱정됩니다. 어떤 CSS, fallbacks 등을 사용할 지에 대한 안내서가 있습니까? 브라우저 스니핑을해야합니까? 알려진 제한은 무엇입니까?

IE9를 들어

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet"> 

<i class="material-icons edit_icon">more_vert</i> 

와 아래, 그들은 아래 코드 조각을 사용 말하지만, 그것은 실제 IE9에서 작동합니까 IE 9. 내 IE 11의 에뮬레이터에서 빈입니까?

<i class="material-icons">&#xE5D4;</i> 

브라우저 스니핑을해야하나요, 아니면 둘 다 포함하고 브라우저 하나만 보여줄 수 있습니까?

이 페이지에는 모바일 https://github.com/google/material-design-icons/issues/179과 같은 문제 목록이 나와 있습니다 (Why Google Material Icons Can't be Shown on Mobile). 그들은 서로 다른 솔루션을 제공합니다.

잘 정리 된 가이드가 있습니까? 이 아이콘이 글꼴로 사용될 준비가되어 있지 않습니까?

Answer 1

일반적으로 브라우저 지원 아이콘 글꼴이 가장 좋으며, 그들은 모두 IE6으로 돌아갑니다.

Google 소재 아이콘은 스크린 리더가있는 사람들이 아이콘이 무엇인지 이해하는 데 도움이되는 최첨단 소재를 사용합니다. 얼굴의 아이콘이 합자라고뿐만 아니라 (IE 10)를 지원하지 않고는 여전히 꽤 좋은

<i class="material-icons">face</i> 

은 무엇 클라이언트/프로젝트의 요구에 따라 달라집니다. 이전에는 화면 판독기가 아이콘의 ID를 말하지 않도록 aria-hidden을 사용했습니다. Here is an article that may be useful further reading.